Холст getImageData два изображения

Question

Все,

Мне нужно получить цвет моего изображения в моем объекте холста.

Вот чем я сейчас занимаюсь:

_canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;

Это то, что я хочу, но у меня есть два изображения... одно не имеет цвета просто нарисовать... другое то же самое, но с цветом в каждой части... Я хочу показать пользователю.. изображение без цвета... и при наведении мыши... получить "обратно" цвет.

Я надеюсь, вы понимаете, что я пытаюсь сделать здесь.

Я добавляю изображение таким образом:

loadIMLImage(context, "http://localhost:51413/img/image_color.png");
loadIMLImage(context, "http://localhost:51413/img/image.png");

и это метод

   function loadIMLImage(context, source) {
       base_image = new Image();
       base_image.src = source;
       base_image.onload = function () {
           context.drawImage(base_image, 100, 100);
       }
       return base_image;
   }

Любая помощь будет оценена.

Answer 1

Для этого сценария вы можете сделать следующее:

• Сначала нарисуйте буферное изображение
• Извлечь пиксельный буфер для повторного использования (хранить глобально)
• Нарисуйте основное изображение
• При получении координат проверяйте уже извлеченный буфер

Пример при условии, что у вас есть загруженные изображения:

var context = _canvas.getContext('2d'),
    buffer;

...image loaded and ready here...

// draw back image
context.drawImage(backImage, 0, 0);

// extract buffer right away
buffer = context.getImageData(0, 0, _canvas.width, _canvas.height).data;

// draw main image on top (clear canvas first if smaller)
context.drawImage(mainImage, 0, 0);

Буфер и холст теперь готовы. Буфер, который у вас есть, является копией, и изменения не будут затронуты после его извлечения, поэтому мы защищены от изменений.

Теперь для каждого вызова события с событием в качестве аргумента:

function getPixel(e) {

    var rect = _canvas.getBoundingClientRect(), // get canvas abs. position
        x = e.clientX - rect.left,              // adjust mouse positions
        y = e.clientY - rect.top,
        p = (y * _canvas.width + x) * 4;        // calc offset in buffer

    return {
        r: buffer[p],
        g: buffer[p+1],
        b: buffer[p+2],
        a: buffer[p+3]
    };
}

Мало того, что это работает быстрее, так как вам не нужно каждый раз извлекать часть буфера из процессора, но вам также не нужно создавать второй холст, который был бы необязательным способом сделать это.

Надеюсь это поможет!