Как я могу использовать изображение холста в функции, которая сначала манипулирует, а затем выводит вновь манипулированное изображение обратно пользователю - PullRequest
Новая
       7

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

0 голосов
/ 27 ноября 2011

Пока у меня есть кнопка, которая при нажатии выводит изображение холста во всплывающем окне, используя метод toDataURL (), позволяя сохранить изображение в формате .png. У меня также есть кнопка, которая при нажатии берет оригинальное изображение холста, созданное пользователем, и отображает его на втором холсте. Оба они были реализованы в моих усилиях: взять исходное изображение холста и использовать это изображение в функции, которая манипулирует изображением и рекурсивно вызывает изображение, выводя манипулированное изображение обратно пользователю. Я новичок в js, но у меня есть знания по OO lang's. Если бы я мог использовать Java, я бы сделал это: 

public CanvasImage manipulator(userImage){
    do this to image;
    do this to image;
    return manipulatedImage; //this needs to be a save-able image (toDataURL i think)
}

Что мне нужно сделать, чтобы эта функциональность была захвачена событием onClick с использованием javaScript? Я застрял, любые предложения с благодарностью.

1 Ответ

1 голос
/ 27 ноября 2011

Если вы говорите о том, что для каждого пикселя нужно манипулировать изображением, которое вам нужно использовать .getImageData(x, y, width, height), это дает вам и объект, содержащий поле .data, которое представляет собой массив RGBA каждого пикселя изображения, поэтому .data[0] - это канал R первого пикселя, .data[1] - канал G, .data[2] B, .data[3] канал Альфа, а затем .data[4] - канал R второго пикселя.

Все в диапазоне 0-255, а не 0-1.

Вы можете установить эти значения цвета, может быть, вы хотите, чтобы ваш первый пиксель был синим, затем вы делаете это: 

var img = Ctx.getImageData(0, 0, Canvas.width, Canvas.height);
img.data[0] = 0; // R
img.data[1] = 0; // G
img.data[2] = 255; // B
img.data[3] = 255; // A

КомуНарисуйте ваши измененные данные изображения, просто используйте Ctx.putImageData(img, x, y);

Ваше событие onclick будет выглядеть так: 

button.Canvas = Canvas;
button.Ctx = CanvasContext;
button.addEventListener("click", function()
{
    var img = this.Ctx.getImageData(0, 0, this.Canvas.width, this.Canvas.height);
    // Do something to the image data here
    this.Ctx.putImageData(img, 0, 0);
}, false);

Или

Вы можетепросто хотите нарисовать свое изображение на внеэкранном холсте, сделайте там все, что хотите, а затем перетащите его обратно на холст, который может видеть пользователь.Поскольку вы сказали, что вы новичок в JS, вот как вы создаете свой холст: 

var newCanvas = document.createElement("canvas");
var newCtx = Canvas.getContext("2d");

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

...