Question

我有以下代码，我只是简单地绘制从我的html / js所在的同一本地目录中加载的图像，然后onload操纵像素并将它们设置为255.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 322;

context.fillStyle = "red";
context.fillRect(0, 0, canvas.width, canvas.height);


function imageLoaded(ev) {

    im = ev.target;

    context.drawImage(im, 0, 0, canvas.width, canvas.height);

    imageData = context.getImageData(0, 0,  canvas.width, canvas.height);


    for (var h = 1; h < canvas.height; h++) {
        for (var w = 1; w < canvas.width; w++) {

            r = h * w;
            g = r + 1;
            b = r + 2;
            a = r + 3;


            imageData[r] = 255;
            imageData[g] = 255;
            imageData[b] = 255;
            imageData[a] = 255;



        }
    }
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.putImageData(imageData, 0, 0);



}


var image_obj = new Image();
//    image_obj.crossOrigin = "Anonymous";
image_obj.src = 'file:///Users/alexanderbollbach/Dropbox/projs/WEB/imageProc1/building.png';
image_obj.onload = imageLoaded;

getImageData函数抛出错误：

imageproc.js：16 Uncaught SecurityError：无法执行＆＃39; getImageData＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：画布受到跨源数据的污染。

阅读CORS，似乎避免此错误的一种方法是在服务器中运行这些文件，而不仅仅是在chrome中的本地文件夹中运行。我不想这样做。有没有办法在不运行服务器的情况下访问图像原始数据？

CORS污染图像＆amp;画布2d上下文像素操作

0 个答案: