使用Javascript和Canvas從圖像中移動像素

Question

我對從畫布上繪制的圖像移動像素（最終都是像素）感興趣。 這是我正在研究的示例代碼，我相信它在繪制圖像方面做了一些非常標准的工作：

    var images = [ // predefined array of used images
        'http://distilleryimage6.instagram.com/928c49ec07d411e19896123138142014_7.jpg'
    ];
    var iActiveImage = 0;

    $(function(){

        // drawing active image
        var image = new Image();
        image.onload = function () {
            ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
        }
        image.src = images[iActiveImage];

        // creating canvas object
        canvas = document.getElementById('panel');
        ctx = canvas.getContext('2d');

        console.log(ctx);

        var imageData = ctx.getImageData(200, 150, 1, 1);
        var pixel = imageData.data;

    });

所以我有這個，但是有人可以指出正確的方向嗎，例如從圖像中隨機選擇一個像素並將其物理移動到頁面上的其他位置？ 這可能嗎？

謝謝

Answer 1

我不確定“物理移動”的意思，但是可以使用ctx.putImageData()將像素應用於畫布內的其他位置。

var imageData = ctx.getImageData(200, 150, 1, 1);
var pixel = imageData.data;

// You can even get or set the color or alpha of the pixel. (values between 0-255)
var r = pixel[0];
var g = pixel[1];
var b = pixel[2];
var a = pixel[3];

ctx.putImageData(imageData, x, y);  // Where x y are the new coordinates.

另外，您應該將所有此imageData操作都放在onload函數中，因為在您的示例中，調用ctx.getImageData()時仍不加載圖像，因此您要處理空白像素。

還要注意，出於安全原因，不能在從其他域加載的圖像上使用getImageData() 。 所以我認為您的示例將引發類型為Uncaught Error: SECURITY_ERR: DOM Exception 18 ，因為圖像是從Instagram加載的。

Answer 2

我認為本教程可以為您提供幫助：

https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations