将大画布的内容转换为JPEG

Question

How to convert contents of a large Canvas to a JPEG format? I have a large canvas (around 1000x1000 pixels or larger) that I'd like to convert to JPEG formatted data for uploading to a server.

If the image were smaller, I could use canvas.toDataURL('image/jpeg') , but data URLs have a max size, and my image doesn't fit under that limit.

There is canvas.getImageData() which looks promising, but how to convert that to a JPEG? Is that possible on the client side?

I have tried using canvas.toDataURL(), and it doesn't work for large Canvases. Browsers seem to have max size for dataUrl . For example Chrome gives me data URL data:, when using a large canvas.

Answer 1

You can use toBlob to achieve this

The HTMLCanvasElement.toBlob() method creates a Blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.

You'll notice the last two arguments I submitted were 'image/jpeg', 0.9 this is the type and quality you can leave these out if you ever want a PNG.

If type is not specified, the image type is image/png. The created image is in a resolution of 96dpi. The third argument is used with image/jpeg images to specify the quality of the output.

 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> 

I hope you find this helpful 🙂