Rasterization of images in SVG fails

Site Feedback
1

Hello there,
While working on a thumbnail generator notebook, I found out that the SVG rasterization fails for embedded images, I made a note book to make it clearer:

2

Just confirming that I was able to duplicate the same errors as @MAKIO135.

3

Very interesting. We will look into it…

1 Like
4

This is now logged as a bug. Thanks for raising it!

1 Like
5

So it seems like the first example in that sample notebook fails on CORS (you can see it in the dev console) but the second example works for me on Safari, Chrome and Firefox… Can you recheck that one, please? This is what I get when I download PNG on that cell:
svg2-4
We think this should work with FileAttachment images.

However, the original notebook (thumbnail generator) is still a bit strange. The images are in-memory (not File Attachments), and they seem to have the right origin set, and also don’t throw any errors.

1 Like
6

Thanks @Cobus, I just updated my browser (Chrome canary) and the FileAttachment example works :pray:
@rreusser and @pstuffa also pointed the CORS problem on twitter as well as a possible workaround.
No idea for the in-memory images though :confused:

7

Can you elaborate what you mean by “in-memory images”?

8

I just updated the notebook including previous feedback and a section for in-memory images (images uploaded in memory using an input type=file element)

9

You can solve the problem by using data URLs instead of object URLs. In your images cell, replace the line:

    img.src = URL.createObjectURL(file)

with the following:

    const reader = new FileReader();
    reader.onload = () => img.src = reader.result;
    reader.readAsDataURL(file);
2 Likes
10

Awesome! Thanks @mootari :raised_hands:
Also updated the (now working) thumbnail generator notebook following your comment :pray:

2 Likes
11

Sweet! Glad you figured it out. I guess those ‘in-memory’ images needed data URLs, not object URLs, as @mootari figured out. Thanks!