使用Javascript和Canvas从图像中移动一个像素

Use Javascript and Canvas to move a pixel from an image

本文关键字：像素 一个 移动 Javascript Canvas 图像 使用      更新时间：2023-09-26

我对从画布上绘制的图像移动一个像素(最终是所有像素)感兴趣。这是我正在工作的示例代码，我相信它在绘制图像方面做了一些非常标准的东西:

    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;
    });

所以我有这个，但有人能指出我在正确的方向做的事情，如随机选择一个像素从图像和物理移动它在页面上的其他地方?这可能吗?

谢谢

我不确定你的意思是"物理移动它"，但你可以使用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加载的。

我想这个教程可能会对你有所帮助:

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

相关文章：