zoukankan      html  css  js  c++  java

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

    直击现场

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

    发表于4个月前(2014-12-19 00:58)   阅读（103） | 评论（0） 11人收藏此文章, 我要收藏
    赞0

    慕课网，程序员升职加薪神器，点击免费学习

    摘要 HTML5的Drag and Drop是很不错的功能，网上使用例子较多如 http://html5demos.com/drag ，但这些例子大部分没实际用途，本文将搞个有点使用价值的例子，通过Drag and Drop生成图片的Base64的字符串信息。 使用Base64方式的图片有诸多好处，可将多个图片信息整合到单个js文件避免多次http请求，可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处，当然弊端也不少例如不能有效利用浏览器图片缓存机制等。使用HT for Web的朋友会发现HT的例子很多注册图片都采用Base64的方式，这主要是为了方便用户直接本地文件打开HT的...
    html5 Base64 draganddrop 拓扑

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

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

    Screen Shot 2014-12-18 at 11.49.18 PM

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

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    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', {
             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 + "'); ";
        textArea.setText(textArea.getText() + text);                 
        ht.Default.setImage(name, reader.result); 
     
        var note = 'Date: ' + file.lastModifiedDate.toLocaleString() + ' '
                + 'Name: ' + file.name + ' '
                + 'Size: ' + file.size + ' '
                + '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

    Screen Shot 2014-12-18 at 11.43.41 PMScreen Shot 2014-12-18 at 11.51.27 PM
  • 相关阅读:
    库存回滚架构设计原则
    老人血脂高吃什么好
    旁边的旁边的旁边--纪念自己逝去的青春
    JAVA8 Map新方法：compute，computeIfAbsent，putIfAbsent与put的区别
    新晋总监生存指南终章——构建技术团队信息通道
    新晋总监生存指南五——人才运营机制，技术团队如何解决造血能力
    新晋总监生存指南四——项目执行指南，如何挽救混乱的项目
    新晋总监生存指南三——OKR，先进的管理工具
    新晋总监生存指南二——建立指标
    新晋总监生存指南开篇之总监二三事
  • 原文地址：https://www.cnblogs.com/RTdo/p/4430758.html
Copyright © 2011-2022 走看看