以高分辨率渲染HTMLcanvas图像

我正在创build一个系统，用户可以在浏览器（在paper.js或processing.js等的帮助下）在canvas上创build一个图像，并能够打印一个大的（理想的A3,300dpi）尺寸表示他们在canvas上创造了什么。

显然直接从用户浏览器中的canvas元素导出图像我只限于屏幕大小和分辨率等

所以我已经研究了当用户保存并以较大的尺寸捕获图像数据时，立即放大canvas元素的解决scheme。 这可能是一个解决scheme，但我很确定文件大小将很快失控，在较大的尺寸。

我没有使用Node.js，但是想知道是否有经验的人知道Node是否可以实现这个目标，如果这将是一个更好的解决scheme，并简要介绍一下如何去做？

Answer 1

我看到两种方法来实现你想要的：

• 使用超大的canvas，你可以用CSS来缩放。
  例如，您可以有一个1000X1000的canvas，在200pxX200px的较小视图中显示。

  <canvas width=1000 height=1000 style = 'width:200px; height:200px;' id='cv'> </canvas> 

• 使用一个小的canvas在屏幕上显示，并真正画在背景canvas上，在每次更改时在canvas上重现。

这两个解决scheme都不能解决鼠标坐标是整数的问题，所以为了实现对象的“像素完美”位置，您必须实现某种缩放。 第二个解决scheme可能更简单。

要检索鼠标坐标，使用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; 

我很快尝试了两种解决scheme，我很惊讶地发现css解决scheme非常慢（在Ch和FF中），复制后端canvas似乎比用css做得更快。 也许这取决于一些质量设置，但似乎解决scheme2更灵活和更快。

第一个CSS版本在这里（移动鼠标绘制10X10矩形）：

http://jsbin.com/kegohufu/1/

第二回帆布+复制版本在这里（移动鼠标绘制10X10矩形）：

http://jsbin.com/qomiqoqi/1/