canvas.toDataURL后图片背景变成黑色

梦想身高1米82024-07-31 16:45

前情提要：压缩图片的时候，有张白底证件照toDataURL之后变成了黑底，非常疑惑。

查找一番之后发现貌似并没有特别好的解决方案，于是只能canvas绘制前填充白色背景

javascript 复制代码

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

参考

https://blog.csdn.net/xiaolinlife/article/details/119350412

这边博文里解释了透明区域变成黑色背景 的原因：

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

这个aphpa通道，就是RGBA中的A，JEPE通常只有3个通道（红色、绿色和蓝色），而PNG可以有4个通道（红色、绿色、蓝色和透明度）（当然也可以只有3个通道）。