Используйте 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