Question

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

Answer 1

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

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

但是更改画布分辨率可能会清除它。确保您保留创建新画布所需的图像。

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

然后设置为您需要的尺寸。

newCan.width = ?
newCan.height = ?

然后将旧画布复制到其上。

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

如果您重新渲染所有内容，将画布从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);

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

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

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

1 个答案: