javascript - 在图像上使用 "getImageData(...)"(或类似)的方法？

Question

我有以下代码来执行此操作:

img = new Image();
img.src = document.getElementById("input").value;
img.onload = function(){
    console.log("loaded");
    c.height = img.height;
    c.width = img.width;
    dimensions =[img.width,img.height];
    ctx.drawImage(img,0,0,img.width,img.height); 
    imageData = ctx.getImageData(0,0,img.width,img.height).data; 
    ctx.clearRect(0,0,c.width,c.height);
};

但是，在 google chrome 上，它会抛出错误未捕获的安全错误:无法在“CanvasRenderingContext2D”上执行“getImageData”: Canvas 已被跨源数据污染。

不仅如此，这是执行简单操作的一种非常复杂的方式。有更好的方法吗？如果没有，请帮助解决错误？

Answer 1

您想对这些数据做什么？根据这一点，您可以使用 FileReader.readAsDataURL()，特别是当您尝试获取整个图像的数据时。

一些代码:

    var input = document.getElementById('file');
    var ctx2 = document.getElementById('uploadcanvas').getContext('2d');
    var img2 = new Image;
    var canvas = document.getElementById('uploadcanvas');
    var imgprop = document.createElement("img");
    var reader = new FileReader();
    ctx2.save();
    reader.onloadend = function(e){
        imgprop.src = e.target.result
        imgprop.onload = function(){
            ctx2.restore();
            URL.revokeObjectURL(img2.src);
            ctx2.clearRect(0, 0, 100,100);
            var width = imgprop.width;
            var height = imgprop.height;
            console.log(width, height);
            canvas.width = width;
            canvas.height = height;
            img2.src = URL.createObjectURL(input.files[0]);
            img2.onload = function() {
                $('#display-image').css('display', "inline");
                ctx2.drawImage(img2, 0, 0);
            //URL.revokeObjectURL(img2.src);
            };
            $("#button").removeAttr("disabled");
            $("#button").html("Upload to Facebook");
        }

    };
    reader.readAsDataURL(input.files[0]);



function dataURItoBlob(dataURI) {
        var byteString = atob(dataURI.split(',')[1]);
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], {
                type: 'image/png'
        });
}