Currently, I am attempting to modify a weather radar image with a black background by making the background transparent using canvas. However, when I view the modified image, instead of transparency, the background now appears as a red and black checkerboard pattern. You can see an example here:
https://i.sstatic.net/9aTqC.png
The code that I am using for this process is as follows:
function removeBlack(img) {
// Creating a canvas and drawing the 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);
// Obtaining image data and adding opacity to black pixels
let imgData = tmpCtx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height);
let data = imgData.data;
for (var i = 0; i < data.length; i += 4) {
let r = data[i],
g = data[i+1],
b = data[i+2];
if (r === 0 && g === 0 && 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;
}