javascript - 如何优化canvas图像并获取jpg而不是png

Question

<img id='imgt' src='01.jpg' alt='img'>

var img = document.getElementById("imgt");
    c1 = document.createElement("canvas");
    var ctx = c1.getContext("2d");

    var a = $('#imgt').width();
    var b = $('#imgt').height();

    c1.width = a;
    c1.height = b;
    ctx.drawImage(img, 0, 0, a, b);

因此生成的图像与源图像的尺寸相同，但它超过 1MB，而源图像小于 1MB。

源图像是 jpg，结果图像是 png。

如何获取 jpg 而不是 png 以及如何优化 Web 生成的图像？

Answer 1

当您创建数据 URI 时，您可以指定

canvas.toDataURL("image/jpeg", 0.95); 

或

canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95);

这将生成一个 JPG。只要确保您的图片是不透明的，否则背景会变成黑色。