TypeError: null is not an object (evaluating 'i[0].match(/:(.*?);/)[1]')

[StrongerLph]

I caught this error while using the library to compress 8M images：

TypeError: null is not an object (evaluating 'i[0].match(/:(.*?);/)[1]')

May I ask why there is such a mistake?How can I solve this problem?

[Donaldcwl]

Would you mind to upload the image so that I can reproduce the problem you mentioned?

[maxefi]

loading this image: https://svs.gsfc.nasa.gov/vis/a030000/a030800/a030877/frames/5760x3240_16x9_01p/BlackMarble_2016_1200m_australia_labeled.png , on iPad air 2, ios 13.4.1, Chrome 81.0.4044.124/iphone 11 pro, latest ios, safari leads to an error:

Objects are not valid as a React child (found: TypeError: null is not an object (evaluating 'a[0].match(/:(.*?);/)[1]')). If you meant to render a collection of children, use an array instead.

can not reproduce it on any other browser/device so far.

[Donaldcwl]

@maxefi Thanks for the follow-up. I don't have any Apple device in hand so I cannot reproduce it.
I wrote a debugging version of this lib:
browser-image-compression.zip

Can you use this script to run on your devices?

[defigor]

@Donaldcwl Thanks very much for providing support for this issue. We've tried to use it on this device with the provided debugging version, it doesn't give any extra information. The error still is:
TypeError: null is not an object (evaluating 'arr[0].match(/:(.*?);/)[1]')

I did a bit of extra logging in the provided file and found out that the following line:

dataUrl = canvas.toDataURL(fileType, quality);

in
function canvasToFile(canvas, fileType, fileName, fileLastModified)

canvas.toDataURL returns the following: data:, as the url on iOS.

I did a bit more googling around it and it seems that it is due to iOS memory limitations that canvas.toDataURL is not working correctly:

fengyuanchen/cropper#294
https://stackoverflow.com/questions/26152652/ios-html5-canvas-todataurl/26160598

Let me know if you want me to test anything specific. Happy to do it.

[maxefi]

@Donaldcwl what are your thoughts on the issue? any possible workaround coming any soon?

[florian-milky]

Same issue here

[florian-milky]

I tried to set a maxWidthOrHeight hoping it would solve the issue, which it did, but then the image was all black.
Which is an even worse bug

[raccoonback]

I agree with the @defor comment. 😃😃

Because there is a maximum canvas size supported by each browser, I think the image size should be limited to the maximum canvas size for each browser, not Number.POSITIVE_INFINITY.

When I tested Safari with a larger image than 268,435,456 pixels (i.e., 16,384 x 16,384), an error occurred as shown in the picture below.

What do @Donaldcwl think about limiting the image to the maximum size supported by each browser?

If you agree, can I fix it?

ref.

• HTMLCanvasElement.toDataURL()
• maximum-size-of-a-canvas-element

[Donaldcwl]

fixed in v1.0.15

[troymeyer1]

I’m still having this issue with v1.0.15 on iPhones. Guessing it’s a memory issue?

[taoliujun]

still appear with v1.0.17 on ios 13.0