search

drake7707 / paintbynumbersgenerator

Paint by numbers generator
https://drake7707.github.io/paintbynumbersgenerator/
MIT License
310 stars 146 forks source link

saving SVG fails in chrome #1

Closed xenoguy closed 5 years ago

xenoguy commented 5 years ago

saving the SVG file in chrome fails with "network error".

the png and palette save seem to work fine.

SVG saving works fine in firefox, but not in edge or chrome.

drake7707 commented 5 years ago

Can you check the console if there is any more to the error? I tested it with the examples in chrome (Version 71.0.3578.98 (Official Build) (64-bit)) and it works as expected.

The svg download works by creating a ´´ link with the svg data encoded as url (data:image/svg+xml format). If you inspect the ´´ tag you should find the links after you clicked the Download SVG button.

image

If you click on that url, does it work then or do you still get an error?

xenoguy commented 5 years ago

did a bit more testing, and it does work sometimes, but i haven't been able to figure out why it breaks when it breaks.

I turned off all my chrome plugins to make sure it wasn't any of those.

no errors in the JS console.

if i switch to the trivial example and download that svg, it works fine, and then try the medium example image, that then works as well. but it failed initially.

i did manage to copy the elements from a working vs a broken link. and i assume it should be the same svg data for the same image, with the default parameters. but they're different for some reason. I'll attach them here. It's probably a syntax error in the encoding that happens sometimes?

also, thanks for making and releasing this software, it's great! much more advanced than other pbn generators. svg-broken.txt svg-working.txt

drake7707 commented 5 years ago

They'll be different each time because of the random factor involved. K-means clustering has random initial centroids that converge to local maximum points. The corresponding color of those local maximum points as palette, so while it will likely converge to the colors that are most present, they might end up in a different local maxima on the next run. Pretty much the entire segmentation relies on grouping colors so from there on out the result will likely be similar but not entirely the same.

It might be something to do with the length, not sure if there is a maximum length of the attribute. The links you copied are chopped off at some length (around the 2mb mark it seems), but that might be the clipboard limit.

I'll try and reproduce it by running it a few times.

EDIT: while I was typing that I was running it a few times on small and was able to reproduce it so it doesn't look like a length issue.

decodeURIComponent($($("body > a[download='paintbynumbers.svg']").last().get(0)).attr("href").split(",")[1])

seems to yield valid SVG though. I saved the output from the console to a .svg file and it opened fine.

EDIT2: Seems the labels are the culprit. When I uncheck the labels and only generate the border and fill, it works.

Seems https://stackoverflow.com/a/46403589/694640 using a Blob does work on the same generated SVG. I'll use that method to fix the issue. I've tested in firefox and it still works there too. I don't have Edge on this machine so I can't test there.