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

当你＆＃39;重新制作你可以指定的数据URI

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

或

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

将生成JPG。只需确保您的照片不透明，否则背景会变黑。

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

1 个答案: