前情提要:压缩图片的时候,有张白底证件照toDataURL之后变成了黑底,非常疑惑。
查找一番之后发现貌似并没有特别好的解决方案,于是只能canvas绘制前填充白色背景
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个通道)。