Html5 canvas 将PNG缩放为JPEG时控制透明度颜色

当我上传带有透明度的PNG图像时，JPEG转换后，透明部分变为黑色

理想的结果是在转换后的JPEG图像上使透明部分变白

这是我的fineuploader配置的一部分：

extensions: ['jpg', 'png', 'jpeg'],
files: ['.jpg', '.png', '.jpeg'],
multiple: true,
scaling: {
    sendOriginal: false,
    defaultType: 'image/jpeg',
    sizes: [
        {name: "", maxSize: 300},
        {name: "", maxSize: 2048}
    ]
},

---

缩放图像文件时，Fine Uploader将图像绘制到

HTMLCanvasElement

，缩放图像，然后将其转换为

Blob

，然后可以像其他任何文件一样上载。如果所需的输出容器是PNG，则alpha通道数据应保持完整。但是，如果选择JPEG作为目标容器，情况就不同了

您可能知道，JPEG没有透明度的概念。HTML5规范明确规定了应如何处理这种情况：

在中，规范规定：

对于不支持alpha通道的图像类型，序列化图像必须是合成到纯黑色背景上的位图图像

---

因此，这是预期的行为，而要解决这一问题，我们几乎没有什么可以做的。我想，经过足够的研究和修补，改变这种颜色是可能的，但我不打算将其纳入图书馆。如果您对缩放图像有更具体的要求，那么最好的做法是使用ImageMagick之类的工具在服务器端对其进行缩放。在本例中，您的另一个选择是通过设置为“image/png”将图像输出为png。

经过长时间的调查，失败了，我终于得到了它

这是我找到的解决方案，它对我有效

在

第10442行：函数renderImageToCanvas（img、canvas、options、doSquash）

我添加了这段代码

 ctx.beginPath();
 ctx.moveTo(0, 0)
 ctx.lineTo(0, canvas.height);
 ctx.lineTo(canvas.width, canvas.height);
 ctx.lineTo(canvas.width, 0);
 ctx.fillStyle = "#FFF"
 ctx.fill();

就在

ctx.drawImage（img，0，0，宽度，高度）之前

为了更好地理解这段代码，请做一些关于将png转换为画布和透明度的研究

祝您好运
您只需在函数中添加一个
default\u background
参数，然后执行
ctx.fillStyle=default\u background；ctx.fillRect（0,0，canvas.width，canvas.height）
在绘制上传的图像之前