将图像从网页的 html 部分拖放到画布上后如何访问图像数据？

Question

我根本不知道如何访问我放到画布上的图像的图像数据。我尝试过类似的事情data = event.dataTransfer.getData("image")，但这一切都不起作用。

function addDragNDropToCanvas() {
    document.getElementById('canvas').addEventListener("dragover", function(event) { event.preventDefault();}, false);
    //handle the drop
    document.getElementById('canvas').addEventListener("drop", function(event) {
        event.preventDefault();
        console.log('something is dropped on the object with id: ' + event.target.id);
        // var directData=event.dataTransfer.getData("image");
        console.log(event);
        }, false);

 }

Run Code Online (Sandbox Code Playgroud)

掉落事件数据中肯定包含图像数据吗？不是吗？？？（该图像没有自己的 id 属性。）

Answer 1

mar*_*rkE 9

您的用户可能会执行以下两种拖动中的一种（或两种）：

将网页中的 img 元素拖动到画布上，或者
将图像文件从本地驱动器拖到画布上。

如果图像是从您的网页拖动的：

侦听dragover、drop和（可选）dragenter事件。
处理所有 3 个事件时，请告诉浏览器您正在使用event.preventDefault和可选地处理该事件event.stopPropagation。
在drop处理程序中，获取event.dataTransfer.getData('text/plain') which fetches the已删除图像的 .src`。
Image()使用.src和drawImage在画布上创建一个新对象。

如果图像是从本地驱动器拖动的：

1 和 2. 监听并处理与网页代码中相同的事件。

获取用户放置的本地图像文件event.dataTransfer.files。
创建FileReader并读取每个图像文件。该FileReader.readAsDataURL方法将返回一个图像 URL，您可以将其用作.srcImage 对象。
drawImage将每个新图像添加到画布上。

这是允许两者的示例代码：

    window.onload=function(){

        // canvas related vars
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        // dropZone event handlers
        var dropZone=document.getElementById("canvas");
        dropZone.addEventListener("dragenter", handleDragEnter, false);
        dropZone.addEventListener("dragover", handleDragOver, false);
        dropZone.addEventListener("drop", handleDrop, false);
        //
        function handleDragEnter(e){e.stopPropagation(); e.preventDefault();}
        //
        function handleDragOver(e){e.stopPropagation(); e.preventDefault();}
        //
        function handleDrop(e){
            e.stopPropagation();
            e.preventDefault();
            //
            var url=e.dataTransfer.getData('text/plain');
            // for img elements, url is the img src so 
            // create an Image Object & draw to canvas
            if(url){
                var img=new Image();
                img.onload=function(){ctx.drawImage(this,0,0);}
                img.src=url;
            // for img file(s), read the file & draw to canvas
            }else{
                handleFiles(e.dataTransfer.files);
            }
        }
        // read & create an image from the image file
        function handleFiles(files) {
            for (var i=0;i<files.length;i++) {
              var file = files[i];
              var imageType = /image.*/;
              if (!file.type.match(imageType)){continue;}
              var img = document.createElement("img");
              img.classList.add("obj");
              img.file = file;
              var reader=new FileReader();
              reader.onload=(function(aImg){
                  return function(e) {
                      aImg.onload=function(){
                          ctx.drawImage(aImg,0,0);
                      }
                      // e.target.result is a dataURL for the image
                      aImg.src = e.target.result;
                  }; 
              })(img);
              reader.readAsDataURL(file);      
            } // end for
        } // end handleFiles

    }; // end $(function(){});

Run Code Online (Sandbox Code Playgroud)

    body{ background-color: ivory; }
    #canvas{border:1px solid red; margin:0 auto; }

Run Code Online (Sandbox Code Playgroud)

    <!doctype html>
    <html>
        <body>
            <h4>Drag an image from below onto the canvas, or<br>Drag an image file from your desktop onto the canvas.</h4>
            <canvas id="canvas" width=300 height=300></canvas>
            <br>
            <img width="50" src="https://cfl.dropboxstatic.com/static/images/index/rebrand/logos/glyphs/glyph_french_vanilla.svg">
        </body>
    </html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，4 月前
查看次数：	6175 次
最近记录：	6 年，4 月前