Get the App
SLTechnology News&Howtos  ›  Development  › 

How JavaScript sets the background of a canvas picture to white or transparent

Shulou Source: shulou.com Published: 2022-06-01 04:34:47 10月03日 Update

Editor to share with you how JavaScript sets the background of canvas pictures to white or transparent, I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article. Let's learn about it together.

Canvas picture background is set to white or transparent

Var canvas = document.getElementById ("canvas"); var imageData = canvas.getContext ("2d"). GetImageData (0,0, canvas.width, canvas.height); for (var I = 0; I < imageData.data.length; I + = 4) {/ / when the pixel is transparent, it is set to white if (imageData.data [I + 3] = 0) {imageData.data [I] = 255; imageData.data [I + 1] = 255 ImageData.data [I + 2] = 255; imageData.data [I + 3] = 255;}} canvas.getContext ("2d") .putImageData (imageData, 0,0); var img = canvas.toDataURL ("image/jpeg"); img = img.substring (img.indexOf (',') + 1); for (var I = 0; I < imageData.data.length) I + = 4) {/ / when the pixel is white, set to transparent if (imageData.data [I] = = 255) {imageData.data [I] = 0; imageData.data [I + 1] = 0; imageData.data [I + 2] = 0; imageData.data [I + 3] = 0;}} canvas.getContext ("2d") .putImageData (imageData, 0,0) The above is all the content of the article "how JavaScript sets the background of canvas pictures to white or transparent". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Tags: White picture background article pixel content not much most more knowledge industry information information channel channel reference learning help Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Shulou Tech Info Apple Microsoft vpn Huawei