javascript - 将 Canvas 调整为更大的图像并将其发送到服务器

Question

嗨，我的网页上有一个 Canvas 。问题是 Canvas 大约是 550x380 像素，我需要导出类似 A1 格式的图像，即 9933x7016 像素，然后将其发送到服务器。这可能吗？

Answer 1

您可以通过设置 Canvas 的宽度和高度属性来调整 Canvas 的大小。

// ? is a Number < 32767
canvas.width = ?; 
canvas.height = ?;

但是更改 Canvas 分辨率可能会清除它。为了确保保留图像，您需要创建一个新 Canvas 。

var newCan = document.createElement("canvas");

然后设置为您需要的大小。

newCan.width = ?
newCan.height = ?

然后将旧 Canvas 复制到上面。

var ctx1 = newCan.getContext("2d");
ctx1.drawImage(canvas,0,0,newCan.width,newCan.height);

只有重新渲染所有内容时，将 Canvas 从 550x380 像素更改为 9933x7016 才真正值得，为此，您需要放大。

// canvas is the old canvas (small)
var scaleX = newCan.width / canvas.width;
var scaleX = newCan.height / canvas.height;
// set scale on new canvas
ctx1.setTransform(scaleX, 0, 0, scaleY, 0, 0);

然后您可以以更高分辨率重新渲染内容，而无需更改渲染值。

此外，没有多少机器无法处理这么大的 Canvas ，从而抛出“内存不足错误”或只是崩溃。如果机器有内存并且浏览器选项卡仍在运行，则在许多机器上显示 Canvas 时更新速度也会非常慢。 9933x7016 需要接近 280MB 的 GPU 或 CPU RAM 来存储。即使机器有该 RAM，它也可能不可用。因此，请确保您备份了 Canvas 内容所需的所有生成数据，以便客户端至少可以重试。