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

Question

当我上传带有透明度的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}
    ]
},

Answer 1

缩放图像文件时，Fine Uploader 将图像绘制到 HTMLCanvasElement 上，对其进行缩放，然后将其转换为 Blob，然后可以像其他文件一样上传。如果所需的输出容器是 PNG，则 alpha 通道数据应该保持不变。但是，如果您选择 JPEG 作为目标容器，那就是另一回事了。

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

在 section 4.11.4.2 - Serializing bitmaps to a file 中，规范指出：

For image types that do not support an alpha channel, the serialized image must be the bitmap image composited onto a solid black background...

因此，这是预期的行为，几乎没有办法解决这个问题。我想通过足够的研究和修补，有可能改变这种颜色，但这不是我打算合并到库中的东西。如果您对缩放图像有更具体的要求，最好的做法是使用 ImageMagick 之类的东西在服务器端缩放它们。在这种情况下，您的另一个选择是通过将 the scaling.defaultType option 设置为 'image/png' 将图像输出为 PNG。

Answer 2

千辛万苦查无果，终于搞定了。

这是我找到的解决方案，它适用于我。

在 line 10442 : function 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, width, height);

之前

为了更好地理解这段代码，请对将 png 转换为 canvas 和透明度进行一些研究。

祝你好运

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

Controlling transparency color when scaling PNGs as JPEGs

html5-canvas

fine-uploader