咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

网站营销

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

小编给大家分享一下如何解决canvas转base64/jpeg时透明区域变成黑色背景的问题，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了老城免费建站欢迎大家使用！

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

代码如下：

Canvas：
  
  

  

Base64转码后的图片：
  
             var base64Img = document.getElementById("base64Img"),            canvas = document.getElementById("canvas"),            context = canvas.getContext("2d");           // 创建新图片        var img = new Image();        img.src = "1.png";           img.addEventListener("load", function() {            // 绘制图片到canvas上            canvas.width = img.width;            canvas.height = img.height;               context.drawImage(img, 0, 0);               getBase64(canvas, function(dataUrl) {                // 展示base64位的图片                var newImg = document.createElement("img");                    newImg.src = dataUrl;                   base64Img.appendChild(newImg);            });        }, false);           // 获取canvas的base64图片的dataURL（图片格式为image/jpeg）        function getBase64(canvas, callback) {            var dataURL = canvas.toDataURL("image/jpeg");               if(typeof callback !== undefined) {                callback(dataURL);            }        }   

效果如下：

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

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

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

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

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

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

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

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

// 将canvas的透明背景设置成白色   
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);   
for(var i = 0; i < imageData.data.length; i += 4) {   
    // 当该像素是透明的，则设置成白色   
    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;    
    }   
}   
context.putImageData(imageData, 0, 0);

完整代码如下：

Canvas：
  
  

  

Base64转码后的图片：
  
             var base64Img = document.getElementById("base64Img"),            canvas = document.getElementById("canvas"),            context = canvas.getContext("2d");           // 创建新图片        var img = new Image();        img.src = "1.png";           img.addEventListener("load", function() {            // 绘制图片到canvas上            canvas.width = img.width;            canvas.height = img.height;               context.drawImage(img, 0, 0);               // 将canvas的透明背景设置成白色            var imageData = context.getImageData(0, 0, canvas.width, canvas.height);            for(var i = 0; i < imageData.data.length; i += 4) {                // 当该像素是透明的，则设置成白色                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;                 }            }            context.putImageData(imageData, 0, 0);               // 展示base64位的图片            getBase64(canvas, function(dataUrl) {                var newImg = document.createElement("img");                    newImg.src = dataUrl;                   base64Img.appendChild(newImg);            });        }, false);           // 获取canvas的base64图片的dataURL（图片格式为image/jpeg）        function getBase64(canvas, callback) {            var dataURL = canvas.toDataURL("image/jpeg");               if(typeof callback !== undefined) {                callback(dataURL);            }        }   

效果如下：

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

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

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

核心代码如下：

// 在canvas绘制前填充白色背景   
context.fillStyle = "#fff";   
context.fillRect(0, 0, canvas.width, canvas.height);

完整代码如下：

Canvas：
  
  

  

Base64转码后的图片：
  
             var base64Img = document.getElementById("base64Img"),            canvas = document.getElementById("canvas"),            context = canvas.getContext("2d");           // 创建新图片        var img = new Image();        img.src = "1.png";           img.addEventListener("load", function() {            // 绘制图片到canvas上            canvas.width = img.width;            canvas.height = img.height;               // 在canvas绘制前填充白色背景            context.fillStyle = "#fff";            context.fillRect(0, 0, canvas.width, canvas.height);               context.drawImage(img, 0, 0);               // 展示base64位的图片            getBase64(canvas, function(dataUrl) {                var newImg = document.createElement("img");                    newImg.src = dataUrl;                   base64Img.appendChild(newImg);            });        }, false);           // 获取canvas的base64图片的dataURL（图片格式为image/jpeg）        function getBase64(canvas, callback) {            var dataURL = canvas.toDataURL("image/jpeg");               if(typeof callback !== undefined) {                callback(dataURL);            }        }   

效果如下：

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

Perfect！

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

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

看完了这篇文章，相信你对“如何解决canvas转base64/jpeg时透明区域变成黑色背景的问题”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


分享标题：如何解决canvas转base64/jpeg时透明区域变成黑色背景的问题
网址分享：http://dzwzjz.com/article/jdshjh.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
行业新闻 建站学堂 常见问题
联系我们
公司地址 人才招聘
成都 达州
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：达州市南岸区弹子石腾龙大道58号2栋21-6
友情链接： 宜宾网站设计   芦山网站建设   乐山服务器托管   买链接   腾讯云免备案主机   成都电商解决方案   八点广告   南充护栏钻孔机   抖音短视频拍摄   消防工程   
版权所有：青羊区大橙子信息咨询工作室 蜀ICP备2022028542号-14
在线咨询
服务热线
服务热线：028-86922220
TOP