1

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

4

2 回答 2

1

@ueg1990 我倾向于认为您遇到了 CORS 或画布大小问题，但就像 @ken 提到的那样，需要更多代码。

尽管如此，我还是使用以下 HTML 和基于W3Schools 示例的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>

扩展.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 的员工]

于 2014-02-23T10:14:08.927 回答
0

这是我要执行的基本代码。它在 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);

         }
     }
}

});

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

于 2014-02-24T19:38:05.033 回答