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

网络
它是那样的舒展，那样高雅。特别是盛夏时节，热青奔放，有粉的，白的，紫的……，互不相让，竟相开放，它们好象正在表演一场时装表演。在巨大的碧绿的荷叶上，小水珠滚来滚去，偶尔一些小青蛙跳上一片荷叶，把荷叶当做歌台。在陽光的照耀下，水珠闪闪发光，显得楚楚动人。

在用canvas将png图片转jpeg时，发现透明区域被填充成黑色。

代码如下：

XML/HTML Code复制内容到剪贴板
  1. <p>Canvas：</p>
  2. <canvasid="canvas"style="border:1pxsolid#ccc;"></canvas>
  3. <br>
  4. <p>Base64转码后的图片：</p>
  5. <divid="base64Img"></div>
  7. <scripttype="text/javascript">
  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. }
  40. </script>

效果如下：

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

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

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

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

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

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

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

JavaScript Code复制内容到剪贴板
  1. //将canvas的透明背景设置成白色
  2. varimageData=context.getImageData(0,0,canvas.width,canvas.height);
  3. for(vari=0;i<imageData.data.length;i+=4){
  4. //当该像素是透明的，则设置成白色
  5. if(imageData.data[i+3]==0){
  6. imageData.data[i]=255;
  7. imageData.data[i+1]=255;
  8. imageData.data[i+2]=255;
  9. imageData.data[i+3]=255;
  10. }
  11. }
  12. context.putImageData(imageData,0,0);

完整代码如下：

XML/HTML Code复制内容到剪贴板
  1. <p>Canvas：</p>
  2. <canvasid="canvas"style="border:1pxsolid#ccc;"></canvas>
  3. <br>
  4. <p>Base64转码后的图片：</p>
  5. <divid="base64Img"></div>
  7. <scripttype="text/javascript">
  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. //将canvas的透明背景设置成白色
  24. varimageData=context.getImageData(0,0,canvas.width,canvas.height);
  25. for(vari=0;i<imageData.data.length;i+=4){
  26. //当该像素是透明的，则设置成白色
  27. if(imageData.data[i+3]==0){
  28. imageData.data[i]=255;
  29. imageData.data[i+1]=255;
  30. imageData.data[i+2]=255;
  31. imageData.data[i+3]=255;
  32. }
  33. }
  34. context.putImageData(imageData,0,0);
  36. //展示base64位的图片
  37. getBase64(canvas,function(dataUrl){
  38. varnewImg=document.createElement("img");
  39. newImg.src=dataUrl;
  41. base64Img.appendChild(newImg);
  42. });
  43. },false);
  45. //获取canvas的base64图片的dataURL（图片格式为image/jpeg）
  46. functiongetBase64(canvas,callback){
  47. vardataURL=canvas.toDataURL("image/jpeg");
  49. if(typeofcallback!==undefined){
  50. callback(dataURL);
  51. }
  52. }
  53. </script>

效果如下：

缺点显而易见。当png图片上存在半透明区域时，会将其填充为黑色。这是我们不希望的。

解决方案二：在canvas绘制前填充白色背景

核心代码如下：

JavaScript Code复制内容到剪贴板
  1. //在canvas绘制前填充白色背景
  2. context.fillStyle="#fff";
  3. context.fillRect(0,0,canvas.width,canvas.height);

完整代码如下：

XML/HTML Code复制内容到剪贴板
  1. <p>Canvas：</p>
  2. <canvasid="canvas"style="border:1pxsolid#ccc;"></canvas>
  3. <br>
  4. <p>Base64转码后的图片：</p>
  5. <divid="base64Img"></div>
  7. <scripttype="text/javascript">
  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. //在canvas绘制前填充白色背景
  22. context.fillStyle="#fff";
  23. context.fillRect(0,0,canvas.width,canvas.height);
  25. context.drawImage(img,0,0);
  27. //展示base64位的图片
  28. getBase64(canvas,function(dataUrl){
  29. varnewImg=document.createElement("img");
  30. newImg.src=dataUrl;
  32. base64Img.appendChild(newImg);
  33. });
  34. },false);
  36. //获取canvas的base64图片的dataURL（图片格式为image/jpeg）
  37. functiongetBase64(canvas,callback){
  38. vardataURL=canvas.toDataURL("image/jpeg");
  40. if(typeofcallback!==undefined){
  41. callback(dataURL);
  42. }
  43. }
  44. </script>

效果如下：

Perfect！

显然，在canvas绘制前填充白色背景这种方法，不仅简单，而且对png图片的半透明区域填充难看的黑色块。推荐这种解决方案。

另：canvas.toDataURL()方法不允许处理跨域图片。否则会报错。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

您可能有感兴趣的文章
HTML标签之!DOCTYPE文档类型声明
如何使用html+css代码如何实现冰墩墩和雪容融效果
html中checkbox与radio样式美化的简单实例
div设置可编辑内容的方法
css设置placeholder的颜色样式的方法