Skip to content

"Failed - network error" when downloading large png using toImage button #3771

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
slishak opened this issue Apr 15, 2019 · 8 comments · Fixed by #4008
Closed

"Failed - network error" when downloading large png using toImage button #3771

slishak opened this issue Apr 15, 2019 · 8 comments · Fixed by #4008
Assignees
Labels
bug something broken
Milestone

Comments

@slishak
Copy link

slishak commented Apr 15, 2019

I haven't yet found the actual limiting condition, but after some threshold of plot width/height/number of data points, I am unable to download a png of a Plotly plot. See following codepen:

https://codepen.io/anon/pen/WWZBOB

With n = 20000, I can't download the png, Chrome just shows the following message:
image

With n = 10000, it works. It also works with a 2000x2000 figure layout and 20000 points.

@etpinard
Copy link
Contributor

etpinard commented Apr 24, 2019

Thanks for reporting!

Interestingly, downloading your graph in FF66 works fine. Chrome must put a URL-length limit in <a> with download attribute like we use here:

if(canUseSaveLink) {
saveLink.href = url;
saveLink.download = name;
document.body.appendChild(saveLink);
saveLink.click();
document.body.removeChild(saveLink);
resolve(name);
}

I found this stackoverflow post claiming that Chrome uses a 2MB limit.

We should probably try using URL.createObjectURL.


Interestingly, we were using createObjectURL to some extent back before #446

@etpinard etpinard added the bug something broken label Apr 24, 2019
@etpinard etpinard added this to the v1.49.0 milestone May 29, 2019
@etpinard etpinard self-assigned this May 29, 2019
etpinard added a commit that referenced this issue May 29, 2019
@etpinard
Copy link
Contributor

PoC in https://github.com/plotly/plotly.js/compare/createObjectURL

We should be able to get a fix in the next minor 1.49.0 (I wouldn't want to try this our in a patch release).

etpinard added a commit that referenced this issue May 31, 2019
... to workaround Chrome URL length limit (#3771) and
    probably (not tested) have a perf boost.

    N.B. createObjectURL expects Blob object which itself
    expect data string w/o data:image prefix, so use
    imageDataOnly in the Plotly.toImage call
etpinard added a commit that referenced this issue Jun 21, 2019
... to workaround Chrome URL length limit (#3771) and
    probably (not tested) have a perf boost.

    N.B. createObjectURL expects Blob object which itself
    expect data string w/o data:image prefix, so use
    imageDataOnly in the Plotly.toImage call
@etpinard
Copy link
Contributor

https://codepen.io/etpinard/pen/zVdjQg which uses https://42931-45646037-gh.circle-artifacts.com/0/dist/plotly.min.js

appears to work correctly on Chrome 70 and FF67 on my laptop.


Before making a PR, we still need to test the legacy fallbacks on IE10, IE11 and Safari.

@antoinerg
Copy link
Contributor

antoinerg commented Jun 28, 2019

I manually tested saving mock 14.json to image by clicking the snapshot button in the modebar. I used a bundle built off your branch createObjectUrl which is currently at b31fef6

  • IE11: works
  • Safari 12 on macOS Mojave: it goes to the following page instead of saving to file:
    Screenshot_2019-06-27_20-13-51
  • IE10: cannot even render the figure even when uncommenting
    <!-- uncomment below for IE9/10 support -->
    <!-- <script>if(typeof window.Int16Array !== 'function')document.write("<scri"+"pt src='../../dist/extras/typedarray.min.js'></scr"+"ipt>");</script>
    <script>document.write("<scri"+"pt src='../../dist/extras/request_animation_frame.js'></scr"+"ipt>");</script> -->

@etpinard
Copy link
Contributor

Cool. Thanks! Have you tried downloading 14.json on Safari and IE10 off master?

@antoinerg
Copy link
Contributor

antoinerg commented Jun 28, 2019

Taking a snapshot of 14.json on Safari works off master: it downloads the image to the filesystem

@antoinerg
Copy link
Contributor

In IE10 I can't load the dashboard and render anything.

etpinard added a commit that referenced this issue Jul 2, 2019
... to workaround Chrome URL length limit (#3771) and
    probably (not tested) have a perf boost.

    N.B. createObjectURL expects Blob object which itself
    expect data string w/o data:image prefix, so use
    imageDataOnly in the Plotly.toImage call
@etpinard
Copy link
Contributor

etpinard commented Jul 2, 2019

Things seems to now work ok in Safari off ecf3ac7 on browserstack.

Still, before I make a PR, I would appreciate if someone with access to a Mac could test out https://codepen.io/etpinard/pen/QXraeW in Safari.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug something broken
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants