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

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:

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

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:

plotly.js/src/snapshot/filesaver.js

Lines 45 to 52 in 4529fe9

    
           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

[PoC] use URL.createObjectURL to download large images

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).

use createObjectURL during Plotly.downloadImage

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.

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:

IE10: cannot even render the figure even when uncommenting

plotly.js/devtools/test_dashboard/index.html

Lines 22 to 24 in 3d383b7

    
             <!-- 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> -->

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

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

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

use createObjectURL during Plotly.downloadImage

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!

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

	<!-- 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> -->

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

Description

Activity

etpinard commented on Apr 24, 2019

etpinard commented on May 29, 2019

etpinard commented on Jun 25, 2019

antoinerg commented on Jun 28, 2019

etpinard commented on Jun 28, 2019

antoinerg commented on Jun 28, 2019

antoinerg commented on Jun 28, 2019

etpinard commented on Jul 2, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions