1

crossrider を使用して、特定のピクセルで画像を抽出するプラグインを作成しています。canvas を使用してピクセル画像を取得します。しかし、私が今見ているvar data = context.getImageData(m, n, 1,1).dataのは、ピクセルの場所である場所を実行すると、コードがそこから壊れることですm。n何も起こらないように。この行の前後に console.log ステートメントを追加しましたが、その後のステートメントは印刷されないため、データを取得できません。それは画像がピクセルを読み取れないということですか？画像を圧縮するピンタレストに画像をアップロードしたため、サイズとピクセルの色が影響を受けます。ここで何か助けていただければ幸いです。

4

2 に答える 2

1

@ueg1990 CORSまたはキャンバスサイズの問題が発生していると思いがちですが、@kenが言及したように、さらにコードを追加する必要があります。

それでも、 W3Schools の例に基づいて、次の 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);

[開示：私はクロスライダーの従業員です]

于 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 に答える