【问题标题】：How to convert a image from PNG to JPEG using javascript?如何使用 javascript 将图像从 PNG 转换为 JPEG？
【发布时间】：2014-01-11 17:40:11
【问题描述】：

我正在尝试从画布中获取图像。 PNG 图像正常显示，但 JPEG 出现问题。我在这里附上了图片。第一张图片是我的画布。其次是 PNG，然后是 JPEG。所以我想要白色背景的 JPEG 图像，或者我需要在 JS 中将 PNG 转换为 JPEG 的解决方案

canvas =  $('.jSignature')[0];

            imgData = canvas.toDataURL();
            imgDatajpeg = canvas.toDataURL("image/jpeg");                   

            $(".sigCapHolder").append('<img src='+imgData+' /> ')
            $(".sigCapHolder").append('<img src='+imgDatajpeg+' /> ')

【问题讨论】：

向我们展示生成这些图像的代码肯定会有所帮助
清晰是透明度问题。在画布上放置一个白色背景矩形。
数据 =$('.jSignature')[0].getContext("2d"); Data.fillRect(0,0,10,100); Data.fillStyle="白色";数据.fill();我试过了，但仍然遇到同样的问题
在任何 GUI 或 Web 应用程序中使用都不会显示为黑色

标签： javascript image canvas

【解决方案1】：

作为一种替代方式，使用包将透明图像的黑色背景转换为白色或任何其他基于提供的 HEX 值，在我们的

const Jimp = require("jimp");

// Read the PNG file and convert it to editable format
Jimp.read("./images/your-image.png", function (err, image) {
    if (err) {
        // Return if any error
        console.log(err);
        return;
    }

    image.background(0xFFFFFFFF, (err, val) => {
        // Convert image to JPG and store it to 
        // './output/' folder with 'out.jpg' name
        image.write("./output/out.jpg");
    })

});

【讨论】：

【解决方案2】：

这适用于Firefox，oCanvas.toDataURL("image/jpeg")

【讨论】：

【解决方案3】：

原因

发生这种情况的原因是由于画布是透明的。然而，透明颜色是黑色的，带有透明的 alpha 通道，因此不会显示在屏幕上。

另一方面，JPEG 不支持 Alpha 通道，因此默认的黑色会从其 Alpha 通道中去除，留下黑色背景。

您的 PNG 支持 alpha 通道，因此它与画布的工作方式兼容。

解决方案

要解决这个问题，您必须在画布上手动绘制白色背景，然后再绘制图像：

var canvas =  $('.jSignature')[0];
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#fff';  /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);

/// draw image and then use toDataURL() here

【讨论】：

非常感谢。我纠正了我的问题。我在绘制和动态更改后尝试了。我希望这个答案对未来的很多人有所帮助。
这似乎不起作用，即使我在图像之前绘制我只得到一个白色图像（好像白色矩形在我之后绘制的图像上方）。我应该做点额外的工作吗？