大佬教程收集整理的这篇文章主要介绍了基于HTML5的Drag and Drop生成图片Base64信息,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成@L_673_3@的Base64的字符串信息。
使用Base64方式的@L_673_3@有诸多好处,可将多个图片信息整合到单个js文件避免多次http请求,可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处,当然弊端也不少例如不能有效利用浏览器@L_673_3@缓存机制等。使用HT for Web的朋友会发现HT的例子很多注册@L_673_3@都采用Base64的方式,这主要是为了方便用户直接本地文件打开HT的手册即可操作浏览,无需构建web服务器发布进行访问,用户常问然后将@L_673_3@转出Base64信息,我们使用的就是本文介绍的小工具。
该工具由一个列表、一个拓扑图和一个文本框三部分组成,用户任意拖拽本地多@L_673_3@文件到任意页面部分,HT自动将@L_673_3@信息生成对应的DataModel数据模型,列表显示@L_673_3@效果、名称和宽高信息,拓扑显示@L_673_3@、修改时间和文件大小等信息,文本框生成对应注册到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,height); g.fill(); }; ht.Default.setImage('icon',{ width: 50,height: 50,clip: function(g,height) { g.beginPath(); g.arc(width/2,height/2,Math.min(width,height)/2-3,Math.PI * 2,truE); g.clip(); },comps: [ { type: 'image',stretch: 'uniform',rect: [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 < count; i++) { var file = files[i]; var reader = new FileReader(); reader.onloadend = handleReaderLoadEnd; reader.file = file; reader.readAsDataURL(filE); } } function handleReaderLoadEnd(evt) { var reader = evt.target; var file = reader.file; var name = file.name; name = name.substr(0,name.length - 4); var text = "ht.Default.setImage('" + name + "','" + reader.result + "');\n"; textArea.setText(textArea.getText() + text); ht.Default.setImage(name,reader.result); var note = 'Date: ' + file.lastModifiedDate.toLocaleString() + '\n' + 'Name: ' + file.name + '\n' + 'Size: ' + file.size + '\n' + 'Type: ' + file.type; var node = new ht.Node(); node.setName(Name); node.setImage(Name); node.s({ 'note': note,'note.position': 3 }); dataModel.add(nodE); if(lastNodE){ var edge = new ht.Edge(lastNode,nodE); dataModel.add(edgE); } lastNode = node; }
该代码主要对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转换工具的操作效果视频和抓图供参考:http://v.youku.com/v_show/id_XODUxNzY3OTA4.html
@L_502_9@
以上是大佬教程为你收集整理的基于HTML5的Drag and Drop生成图片Base64信息全部内容,希望文章能够帮你解决基于HTML5的Drag and Drop生成图片Base64信息所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。