Блог

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

Используемый код находится здесь:

 function removeBlack(img) {  // Create canvas and draw image  let tmpCanvas = document.createElement('canvas');  tmpCanvas.width = img.width;  tmpCanvas.height = img.height;  let tmpCtx = tmpCanvas.getContext('2d');  tmpCtx.drawImage(img, 0, 0, tmpCanvas.width, tmpCanvas.height);   // Get image data and add opacity to black pixels  let imgData = tmpCtx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height);  let data = imgData.data;  for (var i = 0; i lt; data.length; i  = 4) {  let r = data[i],  g = data[i 1],  b = data[i 2];    if (r === 0 amp;amp; g === 0 amp;amp; b === 0) data[i   4] = 255;  }   tmpCtx.putImageData(imgData, 0, 0);  imgData = tmpCanvas.toDataURL("image/png");    let image = document.createElement('img');  image.src = imgData;  img.remove();  tmpCanvas.remove();  return image; }  

В вашем цикле должны быть данные[i 3] = 255

данные[i 4] войдут в следующее 32-разрядное цветовое слово и установят максимальный красный байт

Ps: вам также нужно будет проверить, должно ли значение альфа быть 0 или 255 — 255 может быть полностью непрозрачным, а не прозрачным