如何使用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+' /> ')

Answer 1

原因

发生这种情况的原因是画布透明。但透明度颜色为黑色，带有透明的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

Answer 2

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

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

});

Answer 3

这适用于firefox，oCanvas.toDataURL（＆＃34; image / jpeg＆＃34;）