0

jQueryを使用して、クラスを持つすべての画像にグレースケールfxを追加しようとしていgreyscaleますが、以下は機能しないようです。なぜこれが機能しないのかについて誰かが何か考えを持っていますか？

    $(function(){

        var imgObj = $('.greyscale');       
       var canvas = document.createElement('canvas');
        var canvasContext = canvas.getContext('2d');
        var imgW = imgObj.width;
        var imgH = imgObj.height;
        canvas.width = imgW;
        canvas.height = imgH;

        canvasContext.drawImage(imgObj, 0, 0);
        var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg; 
                imgPixels.data[i + 1] = avg; 
                imgPixels.data[i + 2] = avg;
            }
        }

        canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
 });
4

1 に答える 1

1

あなたが現在間違っているのは：

  • キャンバスではなくjQueryオブジェクトを描画する
  • レディハンドラー内でデータURLを返すことは意味がないようです

あなたがすべきことは：

  • すべての画像要素を繰り返し処理し、キャンバスごとに次の手順を実行します。
    • グレースケールバージョンを作成する
    • 画像hrefをグレースケールキャンバスのデータURLに設定します

いいね： http： //jsfiddle.net/eGjak/140/。

$(window).load(function() { // wait for images to load also
    var imgObj = $('.greyscale');
    return imgObj.each(function() {
        var canvas = document.createElement('canvas');
        var canvasContext = canvas.getContext('2d');
        var imgW = this.width;
        var imgH = this.height;
        canvas.width = imgW;
        canvas.height = imgH;

        canvasContext.drawImage(this, 0, 0);
        var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg; 
                imgPixels.data[i + 1] = avg; 
                imgPixels.data[i + 2] = avg;
            }
        }

        canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        console.log(canvas.toDataURL())
        this.src = canvas.toDataURL();
    });
});
于 2011-09-30T10:48:29.537 に答える