我希望创建一个系统，让用户在浏览器上的画布中创建图像（借助 paper.js 或 processing.js 等）并能够打印大图像（理想情况下可达 A3，300dpi）他们在画布中创建的内容的大小表示。
显然直接从用户浏览器中的画布元素导出图像我受限于屏幕尺寸和分辨率等。
因此，我研究了在用户保存和捕获更大尺寸的图像数据时暂时放大画布元素的解决方案。这可能是一个解决方案，但我很确定文件大小在更大的尺寸下会很快失控。
我没有经常使用 Node.js，但想知道是否有经验的人知道 Node 是否可以实现这一点，它是否会是一个更好的解决方案，以及我将如何去做？
【问题讨论】：
标签： javascript node.js canvas
我看到了两种方法来实现你想要的：
使用超大画布，您可以使用 css 进行缩放。
例如，你可以有一个 1000X1000 的画布，在 200pxX200px 的小视图中显示。
<canvas width=1000 height=1000
style = 'width:200px; height:200px;' id='cv'>
</canvas>
使用小画布在屏幕上显示，并在支持画布上真正绘制，每次更改时您都可以在视图画布上重现。
两种解决方案都无法解决鼠标坐标为整数的问题，因此要实现对象的“像素完美”位置，您必须实现某种缩放。第二种解决方案可能更简单。
要检索鼠标坐标，使用 css 缩放不要忘记将它们乘以比例，在情况 2 中，乘以您决定的比例。
// formula to get the css scale :
var cssScaleX = canvas.width / canvas.offsetWidth;
var cssScaleY = canvas.height / canvas.offsetHeight;
// then mouse coords are to be multiplied by the scale :
// mouse.x *= cssScaleX;
我快速尝试了这两种解决方案，我很惊讶地发现 css 解决方案非常慢（在 Ch 和 FF 中），并且复制背面画布似乎比让 css 执行它更快。 也许这取决于一些质量设置，但似乎解决方案 2 更灵活、更快。
第一个 css 版本在这里（移动鼠标绘制 10X10 矩形）：
第二个背面画布+复制版本在这里（移动鼠标绘制10X10矩形）：
【讨论】：