解决canvas转base64/jpeg时透明区域变成黑色背景的方法

代码如下：

1. Canvas：
4. Base64转码后的图片：
8. varbase64Img=document.getElementById("base64Img"),
9. canvas=document.getElementById("canvas"),
10. context=canvas.getContext("2d");
12. //创建新图片
13. varimg=newImage();
14. img.src="1.png";
16. img.addEventListener("load",function(){
17. //绘制图片到canvas上
18. canvas.width=img.width;
19. canvas.height=img.height;
21. context.drawImage(img,0,0);
23. getBase64(canvas,function(dataUrl){
24. //展示base64位的图片
25. varnewImg=document.createElement("img");
26. newImg.src=dataUrl;
28. base64Img.appendChild(newImg);
29. } );
30. } ,false);
32. //获取canvas的base64图片的dataURL（图片格式为image/jpeg）
33. functiongetBase64(canvas,callback){
34. vardataURL=canvas.toDataURL("image/jpeg");
36. if(typeofcallback!==undefined){
37. callback(dataURL);
38. }
39. }

效果如下：

为什么canvas会png的透明区域转成黑色呢？

canvas转换成jpeg之前移除alpha通道，所以透明区域被填充成了黑色。

但是，我们希望的是，canvas可以将png的透明区域填充成白色。

那么怎么将canvas中的透明区域填充成白色呢？

以下是我实践过的两种解决方案，希望对你有帮助。

解决方案一：将透明的pixel设成白色

因为png图片的背景都是透明的，所以我们可以寻找透明的pixel，然后将其全部设置成白色，核心代码如下：

1. //将canvas的透明背景设置成白色
2. varimageData=context.getImageData(0,0,canvas.width,canvas.height);
3. for(vari=0; i

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！