Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #31679 > unrolled thread

Save real large canvas as png

Back to article view | Back to comp.lang.javascript

Contents

  Save real large canvas as png jonas.thornvall@gmail.com - 2016-11-10 16:15 -0800
    Re: Save real large canvas as png "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-11-11 07:22 +0100
      Re: Save real large canvas as png jonas.thornvall@gmail.com - 2016-11-11 00:18 -0800
        Re: Save real large canvas as png JJ <jj4public@vfemail.net> - 2016-11-11 21:30 +0700

#31679 — Save real large canvas as png

When i try to save a large canvas as png using the code in the previous post it the browser gives an error saving saying "interupted Network error". 

It is a very large picture 9800*9800, it is probably something with buffering the picture before saving it?

[toc] | [next] | [standalone]

#31681

jonas.thornvall@gmail.com wrote on 11 Nov 2016 in comp.lang.javascript:

> in the previous post

This is usenet, there is no "previous post".

Don't presume that what your newsreader shows you,
will also be seen by others.

So quote what you are referring to.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#31682

Den fredag 11 november 2016 kl. 07:22:53 UTC+1 skrev Evertjan.:
> jonas.thornvall@gmail.com wrote on 11 Nov 2016 in comp.lang.javascript:
> 
> > in the previous post
> 
> This is usenet, there is no "previous post".
> 
> Don't presume that what your newsreader shows you,
> will also be seen by others.
> 
> So quote what you are referring to.
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

PNG 9800*9800 you can not save picture, maybe out of memory?
PNG 8800*8800 will save, but either something gets wrong with format or simple program like paint can't handle bitmaps of that size because refuse to open claim format invalid.

PNG 6800*6800 works fine both save and open. 

CODE BELOW

<!DOCTYPE html> 
<html> 
<body onload="createCanvasContext()"> 
<button id="pushit">Try it</button><br> 
<canvas id="myCanvas" width="6800" height="6800" style="border:1px solid #000000;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 

<script> 
document.getElementById("pushit").addEventListener("click", savepng); 

function createCanvasContext() 
{ 
canvas = document.getElementById("myCanvas"); 
ctx = canvas.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(200,200,100,0,2*Math.PI); 
ctx.fillStyle="#FF0000"; 
ctx.fill(); 
ctx.stroke(); 
} 

function savepng() { 
    var mypic = canvas.toDataURL('png'); 
    var anobject  = document.createElement('a'); 
    anobject.href = mypic; 
    anobject.download = 'image.png'; 
    anobject.click() 
} 
</script> 

[toc] | [prev] | [next] | [standalone]

#31692

> 
> PNG 9800*9800 you can not save picture, maybe out of memory?
> PNG 8800*8800 will save, but either something gets wrong with format or simple program like paint can't handle bitmaps of that size because refuse to open claim format invalid.
> 
> PNG 6800*6800 works fine both save and open. 
> 
> CODE BELOW
> 
> <!DOCTYPE html> 
> <html> 
> <body onload="createCanvasContext()"> 
> <button id="pushit">Try it</button><br> 
> <canvas id="myCanvas" width="6800" height="6800" style="border:1px solid #000000;"> 
> Your browser does not support the HTML5 canvas tag. 
> </canvas> 
> 
> <script> 
> document.getElementById("pushit").addEventListener("click", savepng); 
> 
> function createCanvasContext() 
> { 
> canvas = document.getElementById("myCanvas"); 
> ctx = canvas.getContext("2d"); 
> ctx.beginPath(); 
> ctx.arc(200,200,100,0,2*Math.PI); 
> ctx.fillStyle="#FF0000"; 
> ctx.fill(); 
> ctx.stroke(); 
> } 
> 
> function savepng() { 
>     var mypic = canvas.toDataURL('png'); 
>     var anobject  = document.createElement('a'); 
>     anobject.href = mypic; 
>     anobject.download = 'image.png'; 
>     anobject.click() 
> } 
> </script>

Since the error message is network related, I'm guessing that the error is
due to the fact that the PNG image data (which is 837,467 bytes when tested
in Chrome) is converted to data URI where the total length of the URL would
be more than 837,467 characters. Because the PNG data in the URL is
represented as Base64 encoding (i.e. 8-bit values represented in 6-bit
values). So if I'm not mistaken, the length would be around 3,349,868
characters. A 837,467 characters URL is long enough already. A 3,349,868
characters URL would be way too long.

In a 2014 discussion [1], Chrome's maximum URL length is 2MiB. While Firefox
is only 64KiB.

[1]
<http://stackoverflow.com/questions/15090220/maximum-length-for-url-in-chrome-browser>

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web