Can't load images when sharing notes about memos HOT 9 CLOSED

I'd like to add that this issue only occurs if the image is being fetched from CDN's which do not set CORS headers for their resources, since we do sanitization after running into CORS policy error

from memos.

I believe the issue may have something to do with this canvas.toDataUrl().
As far as I can understand, when we try to draw a tainted canvas, i.e. using cross-origin images within that canvas, a security error is encountered within safari. The origin-clean flag is set to false which I guess does not allow canvas.toDataUrl() to work as intended in later versions of safari. Reference

I have checked with safari v16, but won't be able to test with newer versions since I do not have physical access to a mac.

from memos.

@wzc90 have you tried with other image uri's as well? I just tested on an older version of safari (15.6), and it works there.

UPDATE: It indeed doesn't work as intended on safari, you can actually see the image being rendered perfectly when you click on share, but in the downloaded image there is no error like before, rather the linked img somehow becomes transparent.

I'm not sure what is causing this, but will see what i can do

from memos.

Issue is not in English. It has been translated automatically.

Title: The image cannot be loaded when sharing a note containing an image link as an image.

Describe the bug

When sharing notes using images, if the note contains an image link like ![](), the image cannot be loaded in the shared image.

Steps to reproduce

1. Write a note containing a ![]() image link, which is visible to the image
2. Click to share the note and select the image. The image is still visible. Click the image to download.
3. Open the downloaded image and find that the image cannot be loaded.

The version of Memos you're using

0.20.1

Screenshots or additional context

No response

from memos.

@boojack I would like to contribute, but would require some help since I'm not sure how to resolve this. Going through the code, it seems like there is a problem with the sanitization of the image content.
I've tested without the Sanitization code and found that it works fine. Since we are using a third party sanitizer, i think the problem would be resolved if we switch over to something else or implement our own.

Image with sanitization code

Image without sanitization code

from memos.

@YohannKovacs @boojack I found that the bug still exists now when using Safari on MacBook, but on other browsers the bug is fixed!

from memos.

@YohannKovacs That's the problem.

from memos.

@wzc90 Can you check the live demo as well? Surprisingly ,I tested on the live demo and found it to be working.

from memos.

@YohannKovacs Just checked the live demo.It doesn't work for my Safari , the downloaded image was transparent too.

from memos.