如何使用JavaScript将图像从PNG转换为JPEG？

Question

我正尝试从画布中获取图像。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+' /> ')

- gauti

---

展示生成这些图片的代码肯定会有所帮助。 - adeneo

清晰度存在透明度问题。在画布上放置一个白色背景矩形。 - Pierre Arlaud

数据 = $('.jSignature')[0].getContext("2d"); 数据.fillRect(0,0,10,100); 数据.fillStyle="white"; 数据.fill(); 我尝试了这个，但仍然遇到相同的问题。 - gauti

如果在任何 GUI 或 Web 应用程序中使用，它不会显示为黑色。 - Eklavya Chandra

Answer 1

原因

发生这种情况的原因是因为画布是透明的。但是透明度颜色是带有透明通道的黑色，所以它不会在屏幕上显示。

另一方面，JPEG不支持透明通道，因此默认的黑色被剥离了其透明通道，留下了一个黑色背景。

PNG支持透明通道，因此与画布工作方式兼容。

解决方法

为了解决这个问题，您需要在画图像之前手动在画布上绘制一个白色背景：

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

- user1693593

---

非常感谢。我已经解决了我的问题。我在绘制后进行了动态更改尝试。我希望这个答案能够帮助未来的许多人。 - gauti

这似乎不起作用，即使我在图像之前绘制，我只得到一个白色图像（好像白色矩形在我后来绘制的图像上方）。我需要做一些额外的工作吗？ - user2078023

Answer 2

这在Firefox中有效，oCanvas.toDataURL("image/jpeg")

- Nwachukwu A. Nnaemeka

---

它对我起作用了。感谢提供这个解决方案。 - Mohammad

@Mohammad 请给我点赞... - Nwachukwu A. Nnaemeka

Answer 3

作为一种替代方法，可以使用一个包将透明图像的黑色背景转换为白色或任何其他颜色，基于提供的十六进制值， 在我们的

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");
    })

});

- GouravGupta