Generate image Base64 Information Based on HTML5 Drag and Drop

Generate image Base64 Information Based on HTML5 Drag and Drop

HTML5 Drag and Drop is a very good function, the use of more examples online such as http://html5demos.com/drag, but most of these examples have no practical use, this article will be a bit useful examples, use Drag and Drop to generate the Base64 string information of the image.

Base64 images have many advantages. You can integrate multiple images into a single js file to avoid multiple http requests, this can prevent the security restrictions of cross-origin access in WebGL examples from being unable to run local files. Of course, there are also many drawbacks, such as the inability to effectively use the browser image cache mechanism. If you use HT for Web, you will find that many registered images of HT use Base64, which is mainly used to make it easier for you to open the HT manual in a local file, you do not need to build a web server for publishing and access. Users often ask and transfer the image to Base64. We use the tool described in this article.

The tool consists of a list, a topology, and a text box. You can drag multiple local image files to any part of the page. HT automatically generates the corresponding DataModel data model for the image information, the List displays the image effect, name, width, height, topology, modification time, file size, and other information. The text box is generated and registered to htDefault. the code snippet of the setImage function. You can directly copy the code in the text box to the js file of your project 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(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 < 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;                }

This code mainly adds dragenter, dragexit, dragover, and drop to the window. stopPropagation (); and evt. preventDefault (); to prevent default behavior, we only need to use e. dataTransfer. files to obtain information about all the currently dragged files, build FileReader for loading, and then build the corresponding ht in DataModel. node objects and attributes are complete.

The Code also contains several technical details about using HT for Web. The list on the left uses the custom vector icon and uses the clip function when defining the vector, in this way, the list icon is displayed as a circle after clip cropping. The listView. drawRowBackground function is reloaded to achieve the list effect of changing the color of the line. The listView. getLabel is overloaded to display more dynamic text information. Use listView. setVisibleFunc to filter out connections that are not displayed in the list.

The following is the video and screenshot of the Base64 Conversion Tool for reference: http://v.youku.com/v_show/id_XODUxNzY3OTA4.html