将图像从网页的 html 部分拖放到画布上后，如何访问图像数据? [英] How to access the image data after dropping an image from the html-part of a webpage onto a canvas?

问题描述

这是一个后续问题如何删除文本和图像在画布上?(Firefox 41.0.1)

我根本不知道如何访问我拖放到画布上的图像的图像数据.我尝试了 data = event.dataTransfer.getData("image") 之类的方法，但都不起作用.

I simply can't find out how to access the image data of the image I dropped onto the canvas. I tried things like data = event.dataTransfer.getData("image"), but that all doesn't work.

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);

 }

放置事件数据中肯定有图像数据吗?不是吗???(图像没有自己的 id 属性.)

There surely is the image-data somewhere incorporated in the drop-event data? Isn't it??? (The image doesn't have an own id-attribute.)

推荐答案

您的用户可能会执行以下两种拖动中的一种(或两种):

• 将一个 img 元素从您的网页拖到画布上，或
• 将图像文件从本地驱动器拖到画布上.

如果图片是从您的网页中拖出的:

1. 监听 dragover、drop 和可选的 dragenter 事件.
2. 在处理所有 3 个事件时，告诉浏览器您正在使用 event.preventDefault 和可选的 event.stopPropagation 处理事件.
3. 在 drop 处理程序中，获取 event.dataTransfer.getData('text/plain') ，它会获取被删除图像的.src`..src`李>
4. 使用 .src 和 drawImage 到画布上创建一个新的 Image() 对象.

1. Listen for the dragover, drop, and optionally the dragenter events.
2. When handling all 3 events, tell the browser you're handling the event with event.preventDefault and optionally event.stopPropagation.
3. In the drop handler, get event.dataTransfer.getData('text/plain') which fetches the.src` of the image that was dropped.
4. Create a new Image() object using the .src and drawImage to the canvas.

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

1 &2.听&处理与网页代码中相同的事件.

1 & 2. Listen & handle the same events as in the webpage code.

1. 获取用户放置在event.dataTransfer.files中的本地图片文件.

创建一个 FileReader 并读取每个图像文件.FileReader.readAsDataURL 方法将返回一个图像 URL，您可以将其用作 Image 对象的 .src.

Create a FileReader and read each image file. The FileReader.readAsDataURL method will return an image URL that you can use as a .src for an Image object.

drawImage 将每个新图像添加到画布上.

drawImage each new image to the canvas.

以下是允许两者的示例代码:

    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(){});

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

    <!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>

这篇关于将图像从网页的 html 部分拖放到画布上后，如何访问图像数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！