search

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
28.76k stars 3.5k forks source link

Broken SVG #5376

Closed c-gross closed 5 years ago

c-gross commented 5 years ago

Hi,

sorry thats is a strange question but maybe someone has an idea.

Amazon is using fabric.js for photo products since this year in germany. But they are using an old version of fabric.js. The problem is, they are saving the result as an SVG. The SVG contains user uploaded image as an embedded base64 jpg usually.

The SVG contains the info:

Created with Fabric.js 1.6.0-rc.1

Sometimes we are not able to open the SVG in common programs like Photoshop, Illustrator or Gimp. Photoshop and Illustrator are showing a message that there is an error. Gimp and the default Ubuntu image viewer are showing an empty image. While some other programs, like Firefox are able to display it correctly. Means it can't be fully broken SVG. There is maybe only a small thing that is not passing the parser of some programs.

I can not provide an example since it happens not that often that I'm able to get a broken SVG with an testorder and I can't show a customer image here. But it happens often enough to be a problem.

In my flow, I fetch the base64 image code from the SVG write it on disk. Later I load the image file rend erit in a PDF. And the DPF has the same problem as the SVG. It's showing a error message in the Adobe PDF Reader. So there might be something withing the base64 encoded image that is not 100% correct.

Is there a known bug in this old Fabric.js version? Is there some way to fix that SVG somehow?

Because Amazon wont change the Faric.js version now and our warehouse wont change the PDF Reader too right before xmas.

asturur commented 5 years ago

try to get a broken SVG please, at least one

May also be svg processing breaking it. Storing in a db, passing with url encode options in the application. Errors outside fabricjs.

I m open to help if we can reproduce

asturur commented 5 years ago

Then if amazon is using fabricJS, even in the latest of its software chain, would be cool to say it, even just for self esteem here. Not a requirement of course. :D

c-gross commented 5 years ago

Well I think Fabric.js is so far the best JS lig for Canvas. I saw that Amazon was using it for 1-2 products in dezember 2017 as a soft go live and can be used by marketplace partners. And they are still working on it, the design changed in the last month for example.

Here is an example on Amazon. That is not one of our products but doesn't matter, it's the same for all products: https://www.amazon.de/CVLR-Fotokissen-Weiss-F%C3%BCllung-40cm/dp/B07FMFFR4J

I'll try to get an example SVG I can share. But that will take maybe abit time. Is the svg processing changing the base64 string of the image?

It is also possible that the customer has already a not 100% jpg file thats why it's so difficult to reproduce or find a image without a person.

asturur commented 5 years ago

you can easily move back to 1.6.0.rc1 version and check what toSVG function in fabric.Image does. I think it just uses toDataURL() when is a canvas and it does nothing when is an image and has a valid source.

Fabricjs does not make distinction from file types. if is a jpeg dataurl is probably loaded like that from file upload. ( like file reader api and read to data url ) if is displayed it means it is good, and then if firefox can display the final svg is good too. When you have a broken svg i ll help

asturur commented 5 years ago

Any luck getting a broken svg @c-gross ?

c-gross commented 5 years ago

It did not happen last week. Maybe it has some other reason.

c-gross commented 5 years ago

Not sure if Amazon changed something or it was something else. It just did not happen again which is strange because we had for some time a couple of broken images and since the last 3 weeks it didn't happen at all.

I'll close the ticket since it's not reproducable anymore. Thank you for your offer to help.

asturur commented 5 years ago

ok if it happens let us know.

c-gross commented 5 years ago

A small update. 2 weeks ago it happend again. I was fast enough to collect all related data to make to able to do some tests.

It happens if the user uploaded image is a progressive JPG. Adobe (Photoshop, PDF Reader, ...) is not able to handle this combination. I tested the SVG with Photoshop. If the SVG contains a progressive JPG, Photoshop will not open the file. With regular JPG no problem. When I render the SVG in a PDF it's the same. Adode Acrobat Reader is not able to open the PDF when it SVG inside contains an progessive JPG.

I just implemented an on the fly detection of these progressive JPG by checking some header byte and just resave them as regular JPGs and the issue seems to be solved. Not the best way but ok.

I think thats not a Fabric.js bug since almost any other programm is able to read these files. Only Adobe is picky. And I think it's not part of the lib to convert images.

asturur commented 5 years ago

good to know. Thanks for the update!