Question

如何将大型Canvas的内容转换为JPEG格式？我有一个大画布（大约1000x1000像素或更大），我想将其转换为JPEG格式的数据，以便上传到服务器。

如果图片较小，我可以使用canvas.toDataURL('image/jpeg')，但数据网址的最大尺寸，我的图片不符合该限制。

canvas.getImageData()看起来很有前景，但如何将其转换为JPEG？这可能在客户端吗？

我尝试过使用canvas.toDataURL（），它不适用于大型画布。浏览器似乎有max size for dataUrl。例如，Chrome在使用大画布时会为我提供数据网址data:,。

Answer 1

您可以使用toBlob来实现此目标

HTMLCanvasElement.toBlob（）方法创建一个Blob对象，表示画布中包含的图像;此文件可以缓存在磁盘上，也可以由用户代理自行决定存储在内存中。

你会注意到我提交的最后两个论点是'image/jpeg', 0.9如果你想要一个PNG，这就是你可以留下它们的类型和质量。

如果未指定type，则图像类型为image / png。创建的图像的分辨率为96dpi。第三个参数与image / jpeg图像一起使用以指定输出的质量。

let canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(600, 0);
ctx.lineTo(1200, 1200);
ctx.lineTo(0, 1200);
ctx.closePath();
ctx.fillStyle = 'yellow';
ctx.fill();

canvas.toBlob((blob) => {
  let img = document.createElement('img');
  let url = URL.createObjectURL(blob);

  img.src = url;
  document.body.appendChild(img);
}, 'image/jpeg', 0.9);

<canvas width="1200" height="1200"></canvas>

我希望你能找到这个有用的

将大画布的内容转换为JPEG

1 个答案: