compressed image corrupted (firefox 89)

[jam33]

Running into a new issue I've never seen before. Using Firefox for Windows 89.0 (64-bit). Not sure when it started happening in firefox.

I have my code setup where a user selects a file input. When they press a button, javascript checks to see if an image is > 1024 pixels. If it is bigger than 1024, it calls image-blob-reduce on the file and compresses the image and attaches the resized image to the form before uploading.

Now, the image is no longer getting uploaded correctly. The resized image is now black and green vertical stripes. I noticed in the debugging console the following error message:

Blocked {URL} from extracting canvas data because no user input was detected.
image-blob-reduce_v3.js:1922:29
image-blob-reduce_v3.js:2250:17

As you can see I've tried using v3 hoping this fixed the issue which it didn't.

This seems to be the same issue referenced here (you can see the green and black stripes in the screenshot attached):
https://githubmemory.com/repo/fengyuanchen/compressorjs/issues/122

My same exact site/JS code/picture works fine in Chrome Version 91.0.4472.77 (Official Build) (64-bit). So it seems to be a firefox issue.

Any thoughts? Thanks!

[puzrin]

• Try demo in FF
• If it works - try to provide minimal possible sample how to reproduce

[jam33]

sounds good. i will do both and report back asap. thanks for the next steps!

[jam33]

the demo you linked to did not work in my version of firefox (same as mentioned before). attaching a screenshot showing the results...

Similar error messages showed up in the console...

Blocked https://nodeca.github.io/image-blob-reduce/ from extracting canvas data because no user input was detected. 4 image-blob-reduce.js:8:25064
Blocked https://nodeca.github.io/image-blob-reduce/ from extracting canvas data because no user input was detected. image-blob-reduce.js:8:29822

[puzrin]

I've updated demo with non-minified src.

1. Could you try again and tell me error info?
2. Could you attach your image zipped?
3. Does version 2.x has the same problem?

PS. googling for "Blocked from extracting canvas data because no user input was detected" gives some strange references to fingerprint protection. I had no time to investigate yet.

[jam33]

Re-tried the test. Still failed (no surprise since you just swapped out the minified version for the full version).

Screenshot:

Error in console.log

Blocked https://nodeca.github.io/image-blob-reduce/ from extracting canvas data because no user input was detected. 4 image-blob-reduce.js:1922:27
Blocked https://nodeca.github.io/image-blob-reduce/ from extracting canvas data because no user input was detected. image-blob-reduce.js:2250:15

Original image file zipped:
image.zip

While I couldn't test your demo with version 2 for the error, my own site was originally running "image-blob-reduce 2.2.1" according to the source code in the local file I had. I first noticed it failing on 2.2.1. I then upgraded my site to v3 and the error still existed. That is when I opened the issue. So, I would say that - yes version 2.2.1 does have the same problem. Thanks!

[rlidwka]

You have fingerprinting enabled in FF, which intentionally mangles the data.

You can open about:config and set privacy.resistFingerprinting.autoDeclineNoUserInputCanvasPrompts to false. This will prompt you to grant the website additional permissions as shown below:

Which would make site work after reload.

"Learn more" links here, might be worth reading: https://support.mozilla.org/en-US/kb/firefox-protection-against-fingerprinting

[jam33]

Definitely helpful to know! Personally, I think it is unreasonable to ask your site users to go into firefox advanced settings and manually change these options for a number of reasons. Additionally, the allow/block message as presented makes it seem like the site might be doing something evil (attempting to track your computer) when in-fact it is doing nothing of the sorts. Lastly, technically speaking, our users are interacting with the site, so I would disagree with firefox that there is "NoUserInput" since our user definitely selected a file in the file-input chooser.

I know you are just providing a work around and I really appreciate that, so please don't think I am trying to argue! I'm just making my case as to why this should not be an accepted solution for this very great library. Hopefully we can work together to make it work seamlessly for end-users via code-changes in the library or adjustments in the site's JS code that triggers the call to image-blob-reduce.

[rlidwka]

Personally, I think it is unreasonable to ask your site users to go into firefox advanced settings and manually change these options for a number of reasons.

I agree. However, it may be reasonable to ask your site users to not go into firefox advanced settings and not manually enable experimental features.

privacy.resistFingerprinting is false by default (in my FF 89, also mentioned in docs above), so in default firefox installation this library will work.

[jam33]

My apologies, I did not know that my value was the non-default! I did a quick search and it seems like it might be related to my VPN extension that I have installed in firefox. My specific VPN in this case is "private internet access". I'll try to uninstall, see if it gets restored, then re-install. Looks like this isn't an issue with the library, but would be good to have confirmation for future users if they run into the same issue.

[puzrin]

https://github.com/nodeca/image-blob-reduce/blob/master/CHANGELOG.md#301--2021-06-17