基于HTML5的Drag and Drop生成图片Base64信息

html5的drag and drop是很不错的功能，网上使用例子较多如 https://html5demos.com/drag ，但这些例子大部分没实际用途，本文将搞个有点使用价值的例子，通过drag and drop生成图片的base64的字符串信息。

使用base64方式的图片有诸多好处，可将多个图片信息整合到单个js文件避免多次http请求，可以避免webgl例子跨域访问的安全限制无法本地文件运行等好处，当然弊端也不少例如不能有效利用图片缓存机制等。使用ht for web的朋友会发现ht的例子很多注册图片都采用base64的方式，这主要是为了方便用户直接本地文件打开ht的手册即可操作浏览，无需构建web服务器发布进行访问，用户常问然后将图片转出base64信息，我们使用的就是本文介绍的小工具。

该工具由一个列表、一个拓扑图和一个文本框三部分组成，用户任意拖拽本地多图片文件到任意页面部分，ht自动将图片信息生成对应的datamodel数据模型，列表显示图片效果、名称和宽高信息，拓扑显示图片、修改时间和文件大小等信息，文本框生成对应注册到htdefault.setimage函数的代码片段，用户直接可以将文本框内的代码拷贝到自己的工程的js文件进行使用。

function init(){                                                                 
	datamodel = new ht.datamodel();                                                                             
	listview = new ht.widget.listview(datamodel); 
	graphview = new ht.graph.graphview(datamodel);
	splitview = new ht.widget.splitview(listview, graphview);
	textarea = new ht.widget.textarea(); 
	textarea.getelement().style.wordwrap = 'normal';
	textarea.getelement().style.color = '#777';
	textarea.seteditable(false);
	new ht.widget.splitview(splitview, textarea, 'v').addtodom();    
	new ht.layout.forcelayout(graphview).start();                            
	listview.setrowheight(50);   
	listview.drawrowbackground = function(g, data, selected, x, y, width, height){
		if(this.isselected(data)){
			g.fillstyle = '#87a6cb';
		}
		else if(this.getrowindex(data) % 2 === 0){
			g.fillstyle = '#f1f4f7';
		}
		else{
			g.fillstyle = '#fafafa';
		}
		g.beginpath();
		g.rect(x, y, width, height);
		g.fill();
	};

	ht.default.setimage('icon', {
		width: 50,
		height: 50,
		clip: function(g, width, height) {   
			g.beginpath();
			g.arc(width/2, height/2, math.min(width, height)/2-3, 0, math.pi * 2, true);
			g.clip();                        
		},
		comps: [
			{
				type: 'image',
				stretch: 'uniform',
				rect: [0, 0, 50, 50],
				name: {func: 'getimage'}
			}
		]
	});
	listview.setindent(60);  
	listview.setvisiblefunc(function(data){
		return data instanceof ht.node;
	});
	listview.geticon = function(data){
		return 'icon';
	};                                  
	listview.getlabel = function(data){
		var name = data.getname(name);
		var image = ht.default.getimage(name);
		if(image){
			name += ' ( ' + image.width + ' x ' + image.height + ' )';
		}
		return name;
	};
	window.addeventlistener("dragenter", dragenter, false);
	window.addeventlistener("dragexit", dragexit, false);
	window.addeventlistener("dragover", dragover, false);
	window.addeventlistener("drop", drop, false);                                             
}

function dragenter(evt) {
	evt.stoppropagation();
	evt.preventdefault();
}

function dragexit(evt) {
	evt.stoppropagation();
	evt.preventdefault();
}

function dragover(evt) {
	evt.stoppropagation();
	evt.preventdefault();
}

function drop(evt) {
	evt.stoppropagation();
	evt.preventdefault();

	datamodel.clear();
	textarea.settext("");
	lastnode = null;                

	var files = evt.datatransfer.files;
	var count = files.length;                
	for (var i = 0; i 

该代码主要对window添加了dragenter、dragexit、dragover和drop的拖拽处理，大部分都是通过e.stoppropagation();和evt.preventdefault();阻止默认行为，我们仅需在最后的drop事件中通过e.datatransfer.files得到所有当前拖拽文件信息，构建filereader进行加载，然后对加载的信息构建对应datamodel中的ht.node对象和属性就完事了。

最后代码中还有几处使用ht for web的技术细节值得提到，左侧list列表通过自定义矢量图标，并且在定义矢量时采用了clip的功能，这样列表的图标就会显示成clip裁剪后的圆形效果。重载了listview.drawrowbackground函数，实现隔行变色的列表效果。重载了listview.getlabel显示了更多的动态文本信息。通过listview.setvisiblefunc过滤不显示连线信息在列表中。

以下为该base64转换工具的操作效果视频和抓图供参考：https://v.youku.com/v_show/id_xoduxnzy3ota4.html