-
代码如下：
xml代码将内容复制到剪贴板。
帆布：
Base64编码的图片：
无功base64img = document.getelementbyid（base64img ），
画布document.getelementbyid（画布），
背景canvas.getcontext（2D）；
创建新图片
VaR img =新的图像（）；
img.src =1。png；
Img.addEventListener（负荷
将图片绘制到画布上
canvas.width = img.width；
canvas.height = img.height；
context.drawimage（1mg，0, 0）；
getbase64（帆布、功能（dataurl）{
图为 / / Base64
无功newimg = document.createelement（IMG）；
newimg.src = dataurl；
base64img.appendchild（newimg）；
}）；
}，假）；
Base64 / /帆布得到图片的dataurl（图片格式的图像和JPEG）
功能getbase64（帆布、回调）{
无功dataurl = canvas.todataurl（图像/ JPEG ）；
如果（typeof回调！=未定义的）{
回调（dataurl）；
}
}
结果如下：
为什么画布将PNG的透明区域变为黑色
在画布被转换为jpeg之前，alpha通道被移除，透明区域被填充为黑色。
然而，我们希望画布能将PNG的透明区域填充为白色。
那么如何将画布的透明区域填充成白色呢
以下是我练习过的两个解决方案，希望能对你有所帮助。
解决方案之一：将透明像素设置为白色
因为PNG图片的背景是透明的，所以我们可以寻找一个透明的像素，然后将其全部设置为白色。核心代码如下所示：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
透明背景画布白色
VaR数据= context.getimagedata（0, 0，canvas.width，帆布，高度）；
对于（var i = 0；i < imagedata.data.length；i = 4）{
当该像素是透明的时，将其设置为白色。
如果（数据。数据{ 3 } = =我+ 0）{
数据。数据{我} = 255；
数据。数据{我} = 255 + 1；
数据。数据{我} = 255 + 2；
数据。数据{我} = 255 + 3；
}
}
context.putimagedata（影像数据，0, 0）；
完整的代码如下所示：
xml代码将内容复制到剪贴板。
帆布：
Base64编码的图片：
无功base64img = document.getelementbyid（base64img ），
画布document.getelementbyid（画布），
背景canvas.getcontext（2D）；
创建新图片
VaR img =新的图像（）；
img.src =1。png；
Img.addEventListener（负荷
将图片绘制到画布上
canvas.width = img.width；
canvas.height = img.height；
context.drawimage（1mg，0, 0）；
透明背景画布白色
VaR数据= context.getimagedata（0, 0，canvas.width，帆布，高度）；
对于（var i = 0；i < imagedata.data.length；i = 4）{
当该像素是透明的时，将其设置为白色。
如果（数据。数据{ 3 } = =我+ 0）{
数据。数据{我} = 255；
数据。数据{我} = 255 + 1；
数据。数据{我} = 255 + 2；
数据。数据{我} = 255 + 3；
}
}
context.putimagedata（影像数据，0, 0）；
图为 / / Base64
getbase64（帆布、功能（dataurl）{
无功newimg = document.createelement（IMG）；
newimg.src = dataurl；
base64img.appendchild（newimg）；
}）；
}，假）；
Base64 / /帆布得到图片的dataurl（图片格式的图像和JPEG）
功能getbase64（帆布、回调）{
无功dataurl = canvas.todataurl（图像/ JPEG ）；
如果（typeof回调！=未定义的）{
回调（dataurl）；
}
}
结果如下：
缺点是显而易见的，当PNG图片中有半透明区域时，它被填充为黑色，这就是我们不想要的。
解决方案二：在绘制画布之前填充白色背景
核心代码如下所示：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
在画布中/在绘制白色背景之前
context.fillstyle =# FFF；
context.fillrect（0, 0，canvas.width，帆布，高度）；
完整的代码如下所示：
xml代码将内容复制到剪贴板。
帆布：
Base64编码的图片：
无功base64img = document.getelementbyid（base64img ），
画布document.getelementbyid（画布），
背景canvas.getcontext（2D）；
创建新图片
VaR img =新的图像（）；
img.src =1。png；
Img.addEventListener（负荷
将图片绘制到画布上
canvas.width = img.width；
canvas.height = img.height；
在画布中/在绘制白色背景之前
context.fillstyle =# FFF；
context.fillrect（0, 0，canvas.width，帆布，高度）；
context.drawimage（1mg，0, 0）；
图为 / / Base64
getbase64（帆布、功能（dataurl）{
无功newimg = document.createelement（IMG）；
newimg.src = dataurl；
base64img.appendchild（newimg）；
}）；
}，假）；
Base64 / /帆布得到图片的dataurl（图片格式的图像和JPEG）
功能getbase64（帆布、回调）{
无功dataurl = canvas.todataurl（图像/ JPEG ）；
如果（typeof回调！=未定义的）{
回调（dataurl）；
}
}
结果如下：
很完美!
显然，在画布渲染之前填充白色背景的方法不仅简单，而且在PNG图片半透明区域中填充了难看的黑色块。
也：的canvas.todataurl（）方法不允许跨域图像处理。否则，这将是错误的。
总结
以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问，你可以留言。