Actualmente estoy tratando de tomar una imagen de radar meteorológico que tiene un fondo negro y hacer que el fondo sea transparente. Estoy usando lienzo para hacer esto. Cuando muestro la imagen, el fondo que debería ser transparente ahora se ve como un patrón de tablero de ajedrez rojo y negro. Mira aquí:

El código que se utiliza está aquí:

 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 < 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; }