Drag and drop based on HTML5 generate picture Base64 information

HTML5 's drag and drop is a very good feature, more examples of online use such as Http://html5demos.com/drag, but the majority of these examples are not practical, this article will be a bit of a useful example, through the drag and Drop generates the BASE64 string information for the picture.

There are many advantages of using the Base64 way of picture, can integrate multiple picture information into a single JS file to avoid multiple HTTP requests, you can avoid the WebGL example cross-domain access security restrictions cannot run local files and other benefits, of course, there are many drawbacks such as the inability to effectively use the browser image caching mechanism. Friends using HT for web will find examples of HT many registered pictures are Base64, which is mainly to facilitate users to open the HT manual directly on the local file to navigate, without the need to build Web server publishing to access, users often ask and then transfer the picture out of Base64 information, We are using the gadget described in this article.

The tool consists of a list, a topology diagram and a text box three parts, the user arbitrarily drag local multi-image files to any part of the page, HT automatically generates the image information corresponding to the Datamodel data model, the list shows the picture effect, name and height information, topology display picture, Modify the time and file size and other information, the text box generated corresponding to register to the Htdefault.setimage function code snippet, the user can directly copy the code inside the text box to their own project JS file for use.

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 (   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,   listview.setvisiblefunc (function (data) {Return data  instanceof ht. Node;}); Listview.geticon = function (data) {return  ' icon ';};                                &nbSp;   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 ();d atamodel.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  -&nbSP;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);d Atamodel.add (Edge);                     }lastnode = node;                 }

The code mainly adds DragEnter, Dragexit, DragOver, and drop to the window, mostly through E.stoppropagation (), and Evt.preventdefault (), blocking the default behavior, We just need to get all the current drag-and-drop information through e.datatransfer.files in the final drop event, build FileReader to load, and build Ht.node objects and attributes in the corresponding Datamodel for the loaded information.

In the final code, there are several technical details for using the HT for Web, which is worth mentioning, the list on the left is a custom vector icon, and clip is used to define the vector so that the list icon will appear as a clip-trimmed round effect. The Listview.drawrowbackground function is overloaded to achieve a list effect of interlaced colors. Overloading the Listview.getlabel shows more dynamic text information. The line information is not displayed in the list via Listview.setvisiblefunc filtering.

The following is the BASE64 conversion tool operation effect Video and screenshot for reference: http://v.youku.com/v_show/id_XODUxNzY3OTA4.html

Drag and drop based on HTML5 generate picture Base64 information