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

这是我们的后续问题

我根本不知道如何访问我放在画布上的图像的图像数据。我试过像

data=event.dataTransfer.getData（“image”）

这样的方法，但都不管用

函数addDragNDropToCanvas（）{
document.getElementById（'canvas'）.addEventListener（“dragover”，函数（事件）{event.preventDefault（）；}，false）；
//处理掉
document.getElementById（'canvas'）.addEventListener（“drop”），函数（事件）{
event.preventDefault（）；
log（'在id为“+event.target.id”的对象上丢弃了某些内容）；
//var directData=event.dataTransfer.getData（“图像”）；
console.log（事件）；
}，假）；
}

在drop事件数据中肯定有图像数据？不是吗？？？ （图像没有自己的id属性。）

这里是我用来处理图像的一组（精简）工具

var imageTools = (function () {
    var tools = {
        canvas : function (width, height) {  // create a blank image (canvas)
            var c = document.createElement("canvas");
            c.width = width;
            c.height = height;
            return c;
        },
        createImage : function (width, height) {
            var image = this.canvas(width, height);
            image.ctx = image.getContext("2d");
            return image;
        },
        loadImage : function (url, callback) {
            var image = new Image();
            image.src = url;
            image.addEventListener('load', cb);
            image.addEventListener('error', cb);
            return image;
        },
        image2Canvas : function (img) {
            var image = this.canvas(img.width, img.height);
            image.ctx = image.getContext("2d");
            image.drawImage(ig, 0, 0);
            return image;
        },
        getImageData : function (image) {
            return (image.ctx || (this.image2Canvas(image).ctx)).getImageData(0, 0, image.width, image.height).data;
        },
    };
    return tools;
})();

解析后，您将拥有全局变量

imageTools

要加载并获取图像数据，您必须等待图像加载回调

var image;
var imageData;
function loaded(event){
    if(event.type === "load"){
        image = imageTools.image2Canvas(this);
        imageData = imageTools.getImageData(image);
        // image data is now in the typed array
        // imageData.data
        // with imageData.width and imageData.height holding the size
        // there are 4 bytes per pixel in the form RGBA
    }
}
imageTools.loadImage(imageURL,loaded);

使用imageTools后将数据放回图像中

// image.ctx is non standard and is a result of the imageTools adding the 
// attribute ctx
image.ctx.putImageData(imageData,0,0);

从可能是多个图像的drop事件中获取URL

var fileList = []; // a list of dropped images
// function called when images dropped
var imagesDropped = function(){
    fileList.forEach(function(image){
        // image.name is the image URL
        // image.type is the mime type    
    });
    fileList = []; // clear the file list
}
var dropEvent = function (event) {
    var i,j, imagesFound;
    imagesFound = false;
    event.preventDefault();
    dt = event.dataTransfer;
    for (i = 0; i < dt.types.length; i++) {  // for each dropped item
        if (dt.types[i] === "Files") { // content from the file system
            for (var j = 0; j < dt.files.length; j++) {
                // check the mime type for the image prefix
                if (dt.files[j].type.indexOf("image/") > -1){
                    fileList.push({  // add to image list
                        name : dt.files[j].name,
                        type : dt.files[j].type,
                    });
                    imagesFound = true;  // flag images found
                }
            }
        }
    }
    if(imagesFound){ // if images dropped call the handling function
        imagesDropped();
    }
}

var fileList=[]；//已删除图像的列表
//删除图像时调用的函数
var imagesDropped=函数（）{
forEach（函数（图像）{
//image.name是图像URL
//image.type是mime类型
});
fileList=[]；//清除文件列表
}
var dropEvent=函数（事件）{
var i，j，imagesFound；
imagesFound=false；
event.preventDefault（）；
dt=event.dataTransfer；
对于（i=0；i-1）{
文件列表。推送（{//添加到图像列表
名称：dt.files[j].名称，
类型：dt.files[j].type，
});
imagesFound=true；//找到标记图像
}
}
}
}
if（imagesFound）{//if图像已丢弃，请调用处理函数
图像截取（）；
}
}

请注意，这只是一个示例，不是跨浏览器解决方案。您将必须实现各种drop管理器，以覆盖所有浏览器。这在Chrome上起作用，因此覆盖了大多数用户。

这里是一套我用来处理图像的（精简的）工具

var imageTools = (function () {
    var tools = {
        canvas : function (width, height) {  // create a blank image (canvas)
            var c = document.createElement("canvas");
            c.width = width;
            c.height = height;
            return c;
        },
        createImage : function (width, height) {
            var image = this.canvas(width, height);
            image.ctx = image.getContext("2d");
            return image;
        },
        loadImage : function (url, callback) {
            var image = new Image();
            image.src = url;
            image.addEventListener('load', cb);
            image.addEventListener('error', cb);
            return image;
        },
        image2Canvas : function (img) {
            var image = this.canvas(img.width, img.height);
            image.ctx = image.getContext("2d");
            image.drawImage(ig, 0, 0);
            return image;
        },
        getImageData : function (image) {
            return (image.ctx || (this.image2Canvas(image).ctx)).getImageData(0, 0, image.width, image.height).data;
        },
    };
    return tools;
})();

解析后，您将拥有全局变量

imageTools

要加载并获取图像数据，您必须等待图像加载回调

var image;
var imageData;
function loaded(event){
    if(event.type === "load"){
        image = imageTools.image2Canvas(this);
        imageData = imageTools.getImageData(image);
        // image data is now in the typed array
        // imageData.data
        // with imageData.width and imageData.height holding the size
        // there are 4 bytes per pixel in the form RGBA
    }
}
imageTools.loadImage(imageURL,loaded);

使用imageTools后将数据放回图像中

// image.ctx is non standard and is a result of the imageTools adding the 
// attribute ctx
image.ctx.putImageData(imageData,0,0);

从可能是多个图像的drop事件中获取URL

var fileList = []; // a list of dropped images
// function called when images dropped
var imagesDropped = function(){
    fileList.forEach(function(image){
        // image.name is the image URL
        // image.type is the mime type    
    });
    fileList = []; // clear the file list
}
var dropEvent = function (event) {
    var i,j, imagesFound;
    imagesFound = false;
    event.preventDefault();
    dt = event.dataTransfer;
    for (i = 0; i < dt.types.length; i++) {  // for each dropped item
        if (dt.types[i] === "Files") { // content from the file system
            for (var j = 0; j < dt.files.length; j++) {
                // check the mime type for the image prefix
                if (dt.files[j].type.indexOf("image/") > -1){
                    fileList.push({  // add to image list
                        name : dt.files[j].name,
                        type : dt.files[j].type,
                    });
                    imagesFound = true;  // flag images found
                }
            }
        }
    }
    if(imagesFound){ // if images dropped call the handling function
        imagesDropped();
    }
}

var fileList=[]；//已删除图像的列表
//删除图像时调用的函数
var imagesDropped=函数（）{
forEach（函数（图像）{
//image.name是图像URL
//image.type是mime类型
});
fileList=[]；//清除文件列表
}
var dropEvent=函数（事件）{
var i，j，imagesFound；
imagesFound=false；
event.preventDefault（）；
dt=event.dataTransfer；
对于（i=0；i-1）{
文件列表。推送（{//添加到图像列表
名称：dt.files[j].名称，
类型：dt.files[j].type，
});
imagesFound=true；//找到标记图像
}
}
}
}
if（imagesFound）{//if图像已丢弃，请调用处理函数
图像截取（）；
}
}

---

请注意，这只是一个示例，不是跨浏览器解决方案。您将必须实现各种drop管理器，以覆盖所有浏览器。这在Chrome上起作用，因此覆盖了大多数用户。

您的用户可能会做这两个拖动中的一个（或两个）：

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

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

收听

dragover

、

drop

，以及可选的

dragenter

事件

处理所有3个事件时，告诉浏览器您正在使用

event.preventDefault

和可选的

event.stopPropagation

处理事件

在

drop

处理程序中，获取

event.dataTransfer.getData（'text/plain'），它获取被删除图像的
.src'

使用画布上的

.src

和

drawImage

创建一个新的

Image（）

对象

如果正在从本地驱动器拖动映像：

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

获取用户丢弃的本地映像文件，这些文件已放置在

event.dataTransfer.files

中

创建一个

FileReader

并读取每个图像文件。

FileReader.readAsDataURL

方法将返回图像URL，您可以将其用作图像对象的

.src

drawImage

将每个新图像绘制到画布上

下面的示例代码允许这两种情况：