Question

我正在使用crossrider制作一个用特定像素提取图像的插件。我使用画布来获取像素图像。但我现在看到的是，当var data = context.getImageData(m, n, 1,1).data m和n是像素位置时，代码会从那里中断。没有任何反应。我在此行之前和之后添加了一个console.log语句，但是它之后的语句从不打印，这意味着它无法获取数据。这是否意味着图像无法读取像素？我已将图像上传到pinterest，这会压缩图像，因此尺寸和像素颜色会受到影响。任何帮助将在这里受到赞赏。

Answer 1

@ ueg1990我倾向于认为你遇到了CORS或画布尺寸问题，但是就像@ken提到的那样，还会有更多代码。

尽管如此，我使用以下基于W3Schools example的HTML和 extension.js 代码创建了一个扩展程序，并且它没有问题。请注意，图像与画布位于同一个域中，并且我调整画布大小以匹配图像大小。

<强> HTML ：

<html>
<head>
</head>
<body>
  <img id="myImage" src="canvas.jpg">
  <canvas id="myCanvas">Canvas not supported by your browser</canvas>
</body>
</html>

<强> extension.js ：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("myImage");
c.height = img.height;
c.width = img.width;
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invert colors
for (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i]=255-imgData.data[i];
  imgData.data[i+1]=255-imgData.data[i+1];
  imgData.data[i+2]=255-imgData.data[i+2];
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,0,0);

[披露：我是Crossrider员工]

Answer 2

这是我尝试执行的基本代码。它在imgur.com中完美运行，但不在Instagram中运行。以下代码位于extension.js：

appAPI.message.addListener(function(msg) {
    console.log("Inside listener!!!");
    if (msg.action === 'findImage') {
        console.log(document.location.href);
        test();
    }
});

var RATIO = 0.06;
var length; 
function test() {
    var divs = document.getElementsByTagName("div");
    for(var i = 0; i < divs.length; i++){
         if( divs[i].getAttribute("src") != "" && divs[i].getAttribute("src") != null && divs[i].getAttribute("src") != undefined  ){
             var src = divs[i].getAttribute("src");
             console.log(src);
             divs[i].getAttribute("height"));
             var img = new Image();

            img.onload = function() {
                //alert("loading photo");

                //console.log(this.width + " " + this.height);
                var canvas = document.createElement("canvas");
                canvas.height = this.height;
                canvas.width = this.width;
                var context = canvas.getContext("2d");
                context.drawImage(this, 0, 0, this.width, this.height);
                heightOfImage = this.height;
                widthOfImage = this.width;
                length = Math.floor(RATIO * canvas.width);
    console.log("Before");
            var data = context.getImageData(0,0,canvas.width,canvas.height).data;           
    console.log(data);
            console.log("Pass");

/*
                for(var m = 0; m < this.width; m++ ) {
                    for(var n = 0; n < this.height; n++) {
                        console.log("Getting data!!!");
                        console.log(context.getImageData(m, n, 1,1).data);
                        var data = context.getImageData(m, n, 1,1).data;
                        console.log(data);
                    }
                }
*/                  


            };

            img.src = src;
        img.crossOrigin = '';
            //console.log(img.src);

         }
     }
}

});

从代码中，我可以看到“之前”打印但没有数据打印，也没有“通过”打印

Crossrider - 无法使用Canvas从图像中获取像素数据

2 个答案: