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

经过长时间的调查并失败后，我终于明白了。

这是我找到的解决方案，对我有用。

在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转换为画布和透明度。

祝你好运

Answer 2

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

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

在section 4.11.4.2 - Serializing bitmaps to a file中，规范声明：

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

所以，这是预期的行为，并且几乎无法解决这个问题。我想，通过足够的研究和修补，改变这种颜色是可能的，但这不是我计划融入图书馆的东西。如果您对缩放图像有更具体的要求，那么您最好的做法是使用像ImageMagick这样的服务器端扩展它们。在这种情况下，您的另一个选择是将the scaling.defaultType option设置为'image / png'，将图像输出为PNG。

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

2 个答案: