使用Javascript和Canvas从图像移动像素

时间:2011-11-06 00:40:36

标签: javascript canvas

我有兴趣从画布上绘制的图像中移动一个像素(最终所有这些像素)。这是我正在努力的示例代码,我相信它在绘制图像方面做了一些相当标准的东西:

    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;

    });

所以我有这个但是有人能指出我做正确的方向,比如从图像中随机选取一个像素并将其物理移动到页面上的其他位置吗?这可能吗?

由于

2 个答案:

答案 0 :(得分: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加载的。

答案 1 :(得分:0)

我认为本教程可能会对您有所帮助:

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