0

Good day. I use the following code to save canvas to local image file.

let canvas = document.createElement('canvas');
canvas.width = "1056";
canvas.height = "1248"; 
document.body.appendChild(canvas);//in case of debug
rasterizeHTML.drawHTML(document.getElementById("canvas").outerHTML, canvas).then(function() {
    date = new Date();
    let a = document.createElement('a');
    let bitmap = canvas.toDataURL("image/png");
    a.href = bitmap.replace("image/png", "image/octet-stream");
    a.download = "canvas " + date.valueOf()+'.png';
    a.click();
});

It works well until canvas height reaches 1k, right after that the resulting file stops loading with error, the file name also corrupts. What could possibly go wrong? Note that save works fine with small images (like 500x500 or 700x900). The canvas rendering works with whatever resolution I set, I can see it by appended image.

nameless noob
  • 1
  • 1

1 Answers1

0

Can you post more of your code? It works for me in this snippet.

var size = 2000;

const canvas = document.getElementById('c');
var c = canvas.getContext('2d');
canvas.width = size;
canvas.height = size;
canvas.style.width  = size+'px';
canvas.style.height = size+'px';

// fill canvas with color
c.fillStyle = '#123456';
c.fillRect(0, 0, size, size);

const save = document.getElementById('save');
save.onclick = saveCanvas;
function saveCanvas() {
  try {
    var date = new Date();
    const a = document.createElement('a');
    const bitmap = canvas.toDataURL("image/png");
    a.href = bitmap.replace("image/png", "image/octet-stream");
    a.download = "canvas " + date.valueOf() + '.png';
    a.click();
  } catch (ex) {
    alert(ex);
  }
}
<a id="save" href="#">save</a>
<canvas id="c"></canvas>
blackbox
  • 86
  • 4