FriendsOfFlarum Profile Image Crop

Benzitczo

pica.js:2480 Uncaught (in promise) Error: Pica: cannot use getImageData on canvas, make sure fingerprinting protection isn't enabled
    at pica.js:2480:17

if (!CAN_USE_CANVAS_GET_IMAGE_DATA) {
      var err = new Error('Pica: cannot use getImageData on canvas, ' + "make sure fingerprinting protection isn't enabled");
      err.code = 'ERR_GET_IMAGE_DATA';
      throw err;
    } //

datitisev

Benzitczo Hm, looks like browser fingerprinting protection prevents the image resizing library from working (nodeca/pica229). This unfortunately cannot be completely bypassed without switching to a resize in the backend... for now I'll see about adding proper error handling so that users can still upload new avatars.

Benzitczo

datitisev

Thanks, but no cant no disable, yeah is protecting true.. no problem take time you when soon future fixed. Good lucky.

datitisev

1.1.2

Add error handling at multiple steps to allow user to upload profile picture on the steps that succeed
Add message regarding fingerprint protection & allow manually disabling resized compression & cropper altogether
- I found that the library used for compressing the resized image (necessary since the cropper sometimes created way larger images) failed on Firefox if canvas fingerprint compression was enabled - it produces a fake image output that is then uploaded, instead of erroring. If the user notices this, they can click two links to disable parts until their upload succeeds.
- If the cropping fails outright when trying to submit, an error will be shown and the modal changes from cropping to just uploading.
- Handling this properly is tricky, but hopefully this causes less confusion. Browsers such as Brave have this fingerprint protection enabled automatically, which breaks these features even in its non-aggressive setting.

datitisev

Benzitczo The update above (1.1.2) is the only fix I'm currently planning. This protection is user-enabled in the browser and thus can be disabled, often per site. I've added clearer errors, but in the end, I can't make functionality work that you are explicitly blocking.

Benzitczo

datitisev Yeah already update - thanks you no problem future fixed 🙂

ravanalaskarov

Uncaught ReferenceError: n is not defined
at t (6c6d85aa-b821-431c-9ef1-77eee7661a29:1:314)
at 6c6d85aa-b821-431c-9ef1-77eee7661a29:1:353

datitisev

1.1.3

Fix error when compressing cropped image
- caused by image-blob-reduce when minified for prod (see nodeca/pica228)
- thanks ravanalaskarov YKDZ for reporting

YKDZ

This error will appear in the browser console when cropping image and will disappear when disable compressing the cropped image.

Uncaught ReferenceError: n is not defined
    at t (cd26e214-87e9-4f48-bbc0-444176645582:1:314)
    at cd26e214-87e9-4f48-bbc0-444176645582:1:353

YKDZ

Now this error will appear when cropping image:

[fof/profile-image-crop] An error occurred while loading image-blob-reduce. TypeError: Cannot read properties of undefined (reading 'call')
    at i (forum.js?v=9c4d6638:1386:6654)
    at i.t (forum.js?v=9c4d6638:1386:6873)

datitisev

YKDZ Not sure if this will fix it, but try either running php flarum assets:publish or disabling & re-enabling the extension. Make sure you hard refresh the page as well to clear its cache.

ravanalaskarov

YKDZ Same error

datitisev

YKDZ ravanalaskarov I can't reproduce this locally. What code appears if you click on the file source (the forum.js?v=9c4d6638:1386:6654)? That may give me some hint as to where exactly the problem is happening.

What browser are each of you using? I fear this may be other issues regarding minifying that I'm not encountering myself.

YKDZ

datitisev
datitisev
I have tried both of them. Then the error message changed:

[fof/profile-image-crop] An error occurred while resizing the image TypeError: n is not a function
    at o.<anonymous> (ProfileImageCropModal.js:165:29)
    at l (runtime.js:63:40)
    at Generator._invoke (runtime.js:294:22)
    at Generator.next (runtime.js:119:21)
    at a (asyncToGenerator.js:3:20)
    at c (asyncToGenerator.js:25:9)
（anonymous） @ ProfileImageCropModal.js:169

I'm using Chrome.

datitisev

1.1.4

Hopefully this is the one in which these errors subside 🤞.

Improve error handling more
Modify optimization settings for code build that seems to resolve the new reports (ravanalaskarov, YKDZ)

YKDZ

datitisev

composer update fof/profile-image-crop
php flarum assets:publish
php flarum migrate
php flarum cache:clear

Now the upload will give this error by default:

Uncaught ReferenceError: n is not defined
    at t (e0d50281-a181-4468-9c5c-08baf4f55eeb:1:314)
    at e0d50281-a181-4468-9c5c-08baf4f55eeb:1:353
	t	@	7e3b07d0-fe90-4e5c-a080-47ff4366459b:1
	（anonymous）	@	7e3b07d0-fe90-4e5c-a080-47ff4366459b:1

But be fixed by disable compressing the cropped image.

datitisev

YKDZ Getting these errors to disappear and reappear is so wild 🙈. Looks like it's back to the error I fixed in 1.1.3... perhaps I combine both "fixes" (I removed it in 1.1.4 because I didn't seem to need it).

Thank you for your testing and your patience. I'll try and fix up 1.1.5 tomorrow morning, after I sleep 😴.

datitisev

YKDZ Instead of making another tag with potential issues, I've started a branch. Could you test these changes with composer require fof/profile-image-crop:dev-ds/fix-library-issues? I've reapplied the patch I reverted, hopefully this fixes all the issues. I wasn't able to reproduce the issue locally, but based on what happened before, this should fix it? 🤞

YKDZ

datitisev
Yes, now it can work all well 😀.

datitisev

1.1.5

After updating, either run php flarum assets:publish or disable & re-enable the extension.

Finally fix problems with chunks & external libraries 🤞

YKDZ Great! This release contains the same changes from that branch. You can switch back to stable releases using composer require fof/profile-image-crop:"*". Pinging @ravanalaskarov as well.

ravanalaskarov

datitisev It's working thanks! But still there is an error in the console:

RootMasqueradePane.tsx:19 [fof/profile-image-crop] An error occurred while loadingimage-blob-reduce. TypeError: Cannot read properties of undefined (reading 'call') at i (SelectField.js:31:31) at i.t (forum.js?v=1e41586c:465:6884)

« Previous Page Next Page »