html2canvas 图片模糊研究及规避方法

Html2canvas 图片模糊，可能的三种处理方法：

1、修改元素的宽高像素。 如果元素及其子元素的宽高变大了，截出的图片也会更大，更清晰。特别是对img或者带背景图的元素，其清晰度和原始宽高像素值直接相关。如果把图片元素的宽高放大并设置transform scale缩小，图片在页面的显示效果不变，但截图时图片分辨率会提高。

2、修改元素的transform： scale(2) 让截图根元素放大，并让截出的图片变大。大图片自动缩小后看，会显得清晰。但是在一些细节，比如文字阴影的偏移方面，显示会有偏差，没有进行相应的缩放。

      let start = () => {
   
        $('#rootNode').css('transform', ‘scale(2)'); // 截图时放大
      };
      let end = () => {
   
        $('#rootNode').css('transform', ‘scale(.5)’); // 截图后恢复
      };

3、html2canvas 的scale参数。这个效果上和方法2基本没有区别。scale参数默认值为 window.devicePixelRatio， mac的视网膜屏上，默认是2了（如果为1， 在视网膜屏幕上会糊），所以mac图片的像素大小是windows图片的2倍。如果要让截出的图大小统一，可以统一设置为2。

上述3种方法，1是最好的，特别是需要提高嵌入的图片的分辨率的时候。2，3差不多，但是3的细节方面要稳定些（比如文字阴影）。

综合来说， 效果 是 1 >2 >3, 实现成本是1 > 2 = 3。

要求不高的场合， 方法3足够好。

清晰度要求高的场合，需要三者结合:

A. 先采用1， 以放大2倍的方式，绘制需要截图的根元素下所有dom元素的宽高。并通过transform： scale(.5)缩小元素，在页面正常显示。这一步也可以不是2倍，而是其他倍数。

B. 截图前采用2，将transform scale(.5)移除, 恢复默认的2倍大小，同时可以规避html2canvas在处理transform过的元素时的各种bug和限制（如阴影偏移）。

C. 最后采用3，设置比例，调整最终的截图大小。

完整代码：

    svgToImage(node){
   
      // 截图前
      let start = () => {
   
        $(node).css('transform', ''); // 相当于scale(1)

        // 截图时文字偏下修正
        $('.editable').each( function () {
   
          let $this = $