[bug] specify the maximum size of Canvas supported by each browser

[raccoonback]

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/ratio of the image remains.)

you can test it using image

Cause

If the maximum size of Canvas supported by a browser that does not support OfflineCanvas is exceeded, canvas.toDataURL() returns "data:,".

browser-image-compression/lib/utils.js

Lines 161 to 164 in 39665bd

	} else { // checked on Win Edge 44, Win IE 11, Win Firefox 76, MacOS Firefox 77, MacOS Safari 13.1
	const dataUrl = canvas.toDataURL(fileType, quality)
	file = await getFilefromDataUrl(dataUrl, fileName, fileLastModified)
	}

If the height or width of the canvas is 0 or larger than the maximum canvas size, the string "data:," is returned.

Therefore, the error i[0].match(/:(.*?);/)[1] in getFilefromDataUrl().

browser-image-compression/lib/utils.js

Lines 63 to 69 in 39665bd

	const mime = arr[0].match(/:(.*?);/)[1]
	const bstr = globalThis.atob(arr[1])
	let n = bstr.length
	const u8arr = new Uint8Array(n)
	while (n--) {
	u8arr[n] = bstr.charCodeAt(n)
	}

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.
( the proportion/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.

Releated issue

• TypeError: null is not an object (evaluating 'i[0].match(/:(.*?);/)[1]') #36
• Black Images #84