if I pass "image/jpeg" in the toDataURL() I lost the quality?

Question

I am trying to save html5 canvas data to server if I pass "image/jpeg" as the first argument in the toDataURL() method I lost the quality?

How can I keep the same quality on image png

Answer 1

To define your own image quality use: toDataURL( type , quality );

toDataURL('image/jpeg', 1  ); // HQ
// 0.92 = FF default
toDataURL('image/jpeg', 0.4); // LQ

MDN Docs :

toDataURL(in optional DOMString type, in any ...args) DOMString Returns a data: URL containing a representation of the image in the format specified by type (defaults to PNG). The returned image is 96dpi.

• If the height or width of the canvas is 0, "data:," representing the empty string, is returned.
• If the type requested is not image/png, and the returned value starts with data:image/png, then the requested type is not supported. Chrome supports the image/webp type.
• If the requested type is image/jpeg or image/webp, then the second argument, if it is between 0.0 and 1.0, is treated as indicating image quality; if the second argument is anything else, the default value for image quality is used. Other arguments are ignored.