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

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/