Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.12.2018, 09:32
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

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();

		});


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

Последний раз редактировалось Роман Андреевич, 10.12.2018 в 09:36.
Ответить с цитированием
  #2 (permalink)  
Старый 10.12.2018, 09:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Роман Андреевич,
цикл по всему массиву точек вместо строки 39 - 42
Ответить с цитированием
  #3 (permalink)  
Старый 10.12.2018, 10:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Роман Андреевич,
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;
    }

  }
Ответить с цитированием
  #4 (permalink)  
Старый 10.12.2018, 10:18
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

рони, спасибо. Работает. ))))
Ответить с цитированием
  #5 (permalink)  
Старый 10.12.2018, 10:33
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

рони, точно, сейчас разобрал imageData, там же массив)))))) В любом случае спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 10.12.2018, 11:08
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,004

понедельничные зарисовки на тему 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);
Ответить с цитированием
  #7 (permalink)  
Старый 10.12.2018, 11:17
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

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

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 не текущей картинки которую мы вставили, а уже существующей. Как каждую новую картинку раскрашивать в нужный цвет???
Ответить с цитированием
  #8 (permalink)  
Старый 10.12.2018, 11:26
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,004

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

надо
ctx.getImageData(x,0, img.width, img.height);
ctx.putImageData(imageData, x, 0);
Ответить с цитированием
  #9 (permalink)  
Старый 10.12.2018, 11:27
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,004

и да
resize() будет убивать всю картинку
Ответить с цитированием
  #10 (permalink)  
Старый 10.12.2018, 11:37
Профессор
Отправить личное сообщение для Роман Андреевич Посмотреть профиль Найти все сообщения от Роман Андреевич
 
Регистрация: 12.08.2016
Сообщений: 299

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменить цвет фона и обратно... cesarr Events/DOM/Window 11 04.04.2017 14:19
Как изменить цвет и размер шрифта в Java savas332 Серверные языки и технологии 3 09.01.2014 17:02
Как изменить цвет кнопки, чтобы когда я нажал, то цвет не пропадал? ntest Общие вопросы Javascript 1 31.07.2013 09:14
Как изменить цвет текста в таблице при наведении на нее? Amateur jQuery 3 01.09.2012 06:19
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42