Question

我目前正在使用canvas元素的网站上工作。人们可以像迷你绘画程序一样绘制和编辑画布。但我有一个问题。这个计划的主要目标是制作一张海报。我的老师（我是一名学生）告诉我，在为海报制作图像时，你需要将分辨率设置为至少6000X9000，这是最大的问题。当我将画布大小设置为760x500然后使用：

var download = document.getElementById('download');
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
download.setAttribute("href", image);

下载它可以工作但是当我调整它（我使用fabric.js）到6000x9000，然后尝试下载它，它给了我一个空白页面。我找到了一些解决这个问题的方法，当我下载画布作为png，当我调整大小时，它需要首先处理我尝试通过先调整大小然后下载但不起作用。

这是对.toDataUrl（）的限制，它无法处理这些大图像吗？

我使用的代码（fabric.js）：

// Download Script
function downloadCanvas() {
  var resolutionScale = 12;
  canvas.setHeight(canvas.getHeight() * resolutionScale);
  canvas.setWidth(canvas.getWidth() * resolutionScale);
  canvas.setZoom(resolutionScale);
  console.log("Width: " + canvas.width);
  console.log("Height: " + canvas.height);
  var download = document.getElementById('download');
  var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  download.setAttribute("href", image);
  console.log(image);
  canvas.setZoom(1);
  canvas.setHeight(canvas.getHeight() / resolutionScale);
  canvas.setWidth(canvas.getWidth() / resolutionScale);
}

编辑：当我在console.log（）中使用dataurl然后复制到https://codebeautify.org/base64-to-image-converter它可以工作（可能是cpu / gpu max power？）

.toDataUrl（）的限制是什么？

0 个答案: