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

我感兴趣的是从画布上绘制的图像移动像素（最终全部）。这是示例代码我工作了，我相信它一些非常标准的东西在绘制图像方面：使用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; 

    });

所以我有这个，但可能有人点我在做这样的事情的正确方向从图像中随机挑选一个像素并将其移动到页面上的其他位置？这可能吗？

感谢

来源

2011-11-06 benhowdle89

“你在网页上的其他地方”是指你在画布外还是仍然在同一个画布内？ – airportyh

我觉得这个教程可以帮助你：

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

来源

2011-11-06 01:40:28 v42

我不知道你所说的“身体移动它”的意思，但你可以使用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加载的。

来源

2011-11-06 22:42:01 farnoux

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

回答

相关问题