Почему метод putImageData библиотеки canvas вырезает пиксели?

Question

[sergey_ovechkin]

Подскажите пожалуйста кто сталкивался с подобным вопросом, искал в гугле не нашол.

Суть проблемы в том что я создаю объект ImageData с прозрачностью равной 0, но метод putImageData
его вырезает, вместо того чтобы нарисовать с веху.

const canvas = document.getElementById('canvas');
   const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, 400, 400);
	
  var imgMap = ctx.getImageData(20, 20, 50 , 50);
	
	for(var y=0; y< 50; y++){
		for(var x=0; x<50; x++){
			
			var i = (y*50+x)*4;
			
			imgMap.data[i] = 255;
			imgMap.data[i+1] = 0;
			imgMap.data[i+2] = 0;
			imgMap.data[i+3] = 0;		
		}	
	}
	
	ctx.putImageData(imgMap, 20, 20);

Answer 1

[twobomb]

Он вставляет прозрачным. Что такое по вашему прозрачность?
Измените фон страницы на красный и он будет красным, а не белым
P.S. Может вы ожидали что в этом квадрате будет видна стенка за монитором?
P.P.S. Достаточно было написать imgMap.data[i+3] = 0; , остальные не имеют значения когда нет альфы

Comments

[sergey_ovechkin]

почему он не рисует зеленые пиксели, которые под прозрачными, а удаляет их?

[twobomb]

sergey_ovechkin, What? Вы рисуете на одном холсте, никаких зеленый пикселей под прозрачными нет, это один слой. putImageData, просто заменяет те пиксели куда вы вставляете на те что вы передаете.
Если вы хотите эффекта перекрытия, то просто рисуйте квадрат через fillRect, но перед этим выставьте globalAlpha например в 0.5

[sergey_ovechkin]

twobomb, решил написать небольшой плагин для масштабирования частиизображения, сейчас он только искажает выделенную область, я хочу ее переместить например в другую часть холста, но он вырежет все что под ним, а мне нужно чтобы он нарисовал его сверху просто, сделать как в спрайтах. Может кто-то делал что-то подобное?

[twobomb]

sergey_ovechkin,
К примеру вы вырезали квадрат, по сути другую фигуру вы вырезать не можете. Но хотите вставить допустим треугольник вписанный в этот квадрат.
Поэтому определяем место куда хотим вставить, и вырезаем такой же по размерам квадрат, а далее просто проходим по нашему изначальному массиву и меняем пиксели на пиксели из второго массива, но только в местах где эти пиксели не входят в наш треугольник. Вставляем, и вуаля вставился только треугольник, хотя по сути вставился квадрат, просто мы скопировали пиксели с зоны выходящей за треугольник.

[sergey_ovechkin]

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

[twobomb]

sergey_ovechkin, Можете рисовать поверх другого, только ручками. Также копируем зону куда хотим вставить и начинаем перемножать пиксели. По сути можно написать свой вариант перекрытия. Мы привыкли что это уже кто-то за нас написал, мы вставляем и хоп магическим образом все работает. Ну если не хотите замарачиваться делайте так, наложите второй канвас поверх первого. И вырезаете область с первого, ну в любом случае вам нужно сделать прозрачными пиксели не входящие в вашу фигуру. Далее вставляете на второй канвас которым поверх первого и прозрачность будет работать так как вы думали.

[twobomb]

sergey_ovechkin, Еще одна мысля пришла в голову. Вот эту вашу зону с прозрачными пикселями нужно перевести в изображение и просто рисовать через drawImage, он прозрачность автоматически обрабатывает. А чтобы перевести из массива пикселей в изображение, можно временно создать канвас с размерами зоны вставить туда, далее получить изображение в бейс64 через canvas.toDataURL() и его уже можно вставлять в src image'а и рисовать через drawImage

[sergey_ovechkin]

twobomb, нашол ответ https://developer.mozilla.org/en-US/docs/Web/API/W...

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 400, 400);
		
	var imgMap = ctx.getImageData(20, 20, 50 , 50);
	
	for(var y=0; y< 50; y++){
		for(var x=0; x<50; x++){
			
			var i = (y*50+x)*4;
			
			imgMap.data[i] = 255;
			imgMap.data[i+1] = 0;
			imgMap.data[i+2] = 0;
			imgMap.data[i+3] = 0;			
		}		
	}
		
   Promise.all([
    // Cut out two sprites from the sprite sheet
    createImageBitmap(imgMap),
    
  ]).then(function(sprites) {
    // Draw each sprite onto the canvas
    ctx.drawImage(sprites[0], 20, 20);  
  });

P.S. тоже сначала подумал про canvas.toDataURL()

[twobomb]

sergey_ovechkin, Ну по сути более удобный метод моего последнего варианта.