canvas - изменить цвет картинки

[Роман Андреевич]

Коллеги, доброго времени суток, начал разбирать canvas и немного тупить начал, одновременно.

Стоит задача следующая, получаю картинку не суть как, она приходит и нормально. Картинка png - прозрачный фон + какая-то фигура одно цвета - желтого rgba(255, 255, 0, 1).

При клике на нее, я получаю данные какие мне нужно, но мне нужно ее перекрасить в другой цвет. например - rgba(228, 60 , 30 ,1);

Как это сделать?

let cvs = document.getElementById('canvas');
let ctx = cvs.getContext('2d');

		function resize() {

			cvs.width = document.documentElement.clientWidth;
			cvs.height = document.documentElement.clientHeight;

		};

		resize();

		let img = new Image();
		img.src = 'images/1.png';

		img.style.display = 'block';

		img.addEventListener('load', () => {

			let options = {

				sX: 0,
				sY: 0,
				sWidth: 400,
				sHeight: 400

			}

			ctx.drawImage(img, options.sX, options.sY, options.sWidth, options.sHeight);

		});

		cvs.addEventListener('click', (e) => {

			// console.log(ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data);

			let imageData = ctx.getImageData(0,0, cvs.width, cvs.height);

			imageData.data[0] = 228;
			imageData.data[1] = 60;
			imageData.data[2] = 30;
			imageData.data[3] = 225;

			ctx.putImageData(imageData, 0, 0);

		}, false);

		canvas.addEventListener('contextmenu', (e) => {

			e.preventDefault();

		});

В примере выше не работает никак. Заранее благодарю.

[рони]

Роман Андреевич,
цикл по всему массиву точек вместо строки 39 - 42

[рони]

Роман Андреевич,

let imageData = ctx.getImageData(0,0, cvs.width, cvs.height);
 let pix  = imageData.data;
  for (let i = 0, n = pix.length; i < n; i += 4) {
    if(pix[i] == 255 && pix[i + 1] == 255 && pix[i + 2] == 0) {
    pix[i]     = 228;
    pix[i + 1] = 60;
    pix[i + 2] = 30;
    }

  }

[Роман Андреевич]

рони, спасибо. Работает. ))))

[Роман Андреевич]

рони, точно, сейчас разобрал imageData, там же массив)))))) В любом случае спасибо

[Alexandroppolus]

понедельничные зарисовки на тему Uint32Array
https://jsfiddle.net/alexandroppolus/wc7r4jbf/

var imageData = ctx.getImageData(0, 0, cv.width, cv.height);
  var pix  = new Uint32Array(imageData.data.buffer);
  
  var replacedColor = 0xff00ffff;
  var resultColor = 0xff1e3ce4;

  for (var i = 0, n = pix.length; i < n; ++i) {
    if(pix[i] == replacedColor) {
    	pix[i] = resultColor;
    }

  }
  ctx.putImageData(imageData, 0, 0);

[Роман Андреевич]

рони, в продолжении темы - на канвас добавляем по картинке при клике на кнопку:

let cvs = document.getElementById('canvas');
let button = document.getElementById('button');
let ctx = cvs.getContext('2d');

let colors = [[255,255,0],[228,60,30],[53,198,29]];
let colorLength = colors.length;
let flag = false;

let images = [];
let options = {

	width: 400,
	height: 400

};

function resize() {

	cvs.width = document.documentElement.clientWidth;
	cvs.height = document.documentElement.clientHeight;

};

function addImage(e) {
	
	if (images.length === colorLength) {

		console.log('больше нельзя добавлять картинок');
		return;

	}

	console.log('Добавили новую картинку');

	let img = new Image();
	img.src = 'images/1.png';

	let color = colors.pop();
	console.log(color);

	img.addEventListener('load', () => {

		images.push(img);

                let x = 0;
		
		switch (images.length) {

			case 2:
				x = 400;
				break;
			case 3: 
				x = 800;
				break;
			default:
				x = 0;
		}

		ctx.drawImage(img, x, 0, options.width, options.height);

		let imageData = ctx.getImageData(0,0, img.width, img.height);
		let data = imageData.data;

		for (let i = 0, n = data.length; i < n; i += 4) {
			
			if (data[i] !== 0 && data[i + 1] !== 0) {

				data[i] = color[0];
				data[i + 1] = color[1];
				data[i + 2] = color[2];

			}

		}
	     
	    ctx.putImageData(imageData, 0, 0);

	});

}

resize();

button.addEventListener('click', addImage);

colors - это массив, который содержит цвета (ну для примера). Далее нам нужно добавить несколько картинок. Тип у них одинаковый (прозрачный фон и заливка фигуры желтая). но на выходе нужно каждую новую картинку раскрасить в новый цвет. Из массива colors берем последний элемент (первый дольше, да и разницы нет). И красим картинку. С первой картинкой все в порядке. но дальше уже хуже. Я как понимаю что let imageData = ctx.getImageData(0,0, img.width, img.height); берет data не текущей картинки которую мы вставили, а уже существующей. Как каждую новую картинку раскрашивать в нужный цвет???

[Alexandroppolus]

ты каждый раз берешь левый верхний угол

надо
ctx.getImageData(x,0, img.width, img.height);
ctx.putImageData(imageData, x, 0);

[Alexandroppolus]

и да
resize() будет убивать всю картинку

[Роман Андреевич]

Alexandroppolus, не работает. Сначала картинка должна быть зеленая, потом красная потом желтая. Но первая зеленая, когда появляется вторая, первая становится красная, вторая желтая. Когда третья появляется то все картинки становятся желтые.)))) я поменял x но все равно та же история