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

Question

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

Answer 1

您可以通过设置宽度和高度属性来调整 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，抛出 "Out of memory error" 或只是崩溃。如果机器有内存并且浏览器选项卡仍然是运行，那么在显示 canvas 时，您在许多机器上的更新也会非常缓慢。 9933x7016 需要接近 280MB 的 GPU 或 CPU RAM 来存储。即使机器具有该 RAM，它也可能不可用。因此，请确保备份 canvas 内容所需的任何生成数据，以便客户端至少可以重试。

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

Resize canvas to bigger image and send it to the server

html

javascript

resize

canvas