如何优化 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);

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

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

如何获得 jpg 而不是 png 以及如何优化网络生成的图像？

Answer 1

制作数据 URI 时可以指定

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

或

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

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

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

How to optimize canvas image and get jpg instead of png

javascript

html

canvas