Question

美好的一天。我使用以下代码将画布保存到本地图像文件。

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();
});

在画布高度达到1k之前它很有效，在此之后生成的文件因错误而停止加载，文件名也会破坏。什么可能出错？请注意，保存适用于小图像（如500x500或700x900）。画布渲染使用我设置的任何分辨率，我可以通过附加图像看到它。

Answer 1

你可以发布更多代码吗？它在我的代码片段中适用于我。

＆＃13;

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);
  }
}

＆＃13;

<a id="save" href="#">save</a>
<canvas id="c"></canvas>

＆＃13;

无法将大画布保存为图像

1 个答案: