Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Save real large canvas as png

15 views
Skip to first unread message

jonas.t...@gmail.com

unread,
Nov 10, 2016, 7:15:51 PM11/10/16
to
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?

Evertjan.

unread,
Nov 11, 2016, 1:22:53 AM11/11/16
to
jonas.t...@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)

jonas.t...@gmail.com

unread,
Nov 11, 2016, 3:18:39 AM11/11/16
to
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>

JJ

unread,
Nov 11, 2016, 9:30:58 AM11/11/16
to
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>
0 new messages