Why is toDataURL so slow?

Question

If I transmit a simple image through the network, it is fast. When I try to transfer the same image created on the canvas using toDataURL , it is much slower. Why?

Answer 1

In general, you are not setting too much context:

When you use toDataURL() , the browser will encode the image as a Base-64 stream with a small header. Base-64 will always increase size by 33% compared to unencrypted size.

If you import a JPEG encoded file, it will usually be smaller than the PNG version of the image. If you forgot to specify the image type for toDataURL , the browser will always use PNG by default.

In this case, specify JPEG as follows:

 var quality = 0.7; var dataUri = canvas.toDataURL('image/jpeg', quality);