Each browser limits the maximum size of a Canvas object.
So, need to resize the image to less than the maximum size that each browser restricts.
(However, the proportion/ratio of the image remains.)
*So when we create an Image object,
if we set width, height within the maximum size of Canvas supported by the browser,
we can prevent not only Black image, but also `i[0].match(/:(.?) ;/)[1]errors. ( theproportion/ratio` of the image remains.)**
How to
resizes the maximum size of canvas supported by the browser when it is first created with Image Objects.
add a bowser dependency to obtain each browser name.
Purpose
Each browser limits the maximum size of a Canvas object. So, need to resize the image to less than the maximum size that each browser restricts. (However, the
proportion/ratioof the image remains.)you can test it using image
Cause
If
the maximum size of Canvassupported by abrowser that does not support OfflineCanvasis exceeded,canvas.toDataURL()returns"data:,".https://github.com/Donaldcwl/browser-image-compression/blob/39665bd16eb5c4a2fdd2c40aa8fee0e2fd435ef8/lib/utils.js#L161-L164
Therefore, the error
i[0].match(/:(.*?);/)[1]ingetFilefromDataUrl().https://github.com/Donaldcwl/browser-image-compression/blob/39665bd16eb5c4a2fdd2c40aa8fee0e2fd435ef8/lib/utils.js#L63-L69
*So when we create an
Image object, if we setwidth,heightwithinthe maximum size of Canvas supported by the browser, we can prevent not onlyBlack image, but also `i[0].match(/:(.?) ;/)[1]errors. ( theproportion/ratio` of the image remains.)**How to
maximum size of canvas supported by the browserwhen it is first created withImage Objects.bowserdependency to obtain each browser name.Releated issue