Question

我正在寻找一个系统，用户可以在浏览器的画布上创建一个图像（借助paper.js或processing.js等），并且能够打印一个大的（理想情况下最多A3，300dpi）它们在画布中创建的大小表示。

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

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

我没有非常多地使用Node.js，但是想知道是否有经验的人会知道Node是否能够实现这个目标以及它是否会是一个更好的解决方案以及我将如何解决这个问题？

Answer 1

我认为有两种方法可以达到你想要的效果：

使用超大画布，用css缩放例如，您可以在200pxX200px较小的视图中显示1000X1000画布。

<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 rect）：

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

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

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

以高分辨率渲染html画布图像

1 个答案: