html2canvas 不高清?模糊?

自从有了Canvas之后 前端能做的事情越来越多了,比如

  • 上传预览
    以前我们上传预览的时候都必须先把图片上传发送给后台,然后后台再返回给我们一个图片url 我们再展示在前台,更别说要截取部分内容了 来来回回至少要2次\bajax往来(1、上传图片返回在线url;2、提交截图范围)但是有了canvas 和 fileReader 我们能直接在前台用canvas读取 图片然后 直接显示出来 要截图也只需在前台完成后直接给后台上传截取后的图片就行了
  • 前台直接生成可保存的图片
    这就要谈到我们今天的主角 html2canvas了
    用法真的超简单,功能却十分强大 用html拼出一个页面 想要保存?直接用html2canvas 就能生成一个canvas 要想转成图片 只需 canvas.toDataURL()就能完成
    在使用html2canvas的时候往往会遇到一个问题,当然 用 安卓和pc的用户可能意识不到,但是用mac和iphone的用户则有一个很切身的体验就是 由于是retina屏 所以 html2canvas生成的图片 很糊!简直是 艾薇画质 有木有!
    于是乎疯狂百度。。。谷歌之。。。
    但是网上的办法试了一大圈。。。我只想掀桌!我日你仙人板板!完全不顶用啊!什么宽高放大2倍 样式宽高为原始大小
    一顿搜啊~然后看了 issue 好吧。。。只要使用最新版,什么毛病都给你治了!
    去他喵的 bower 通过bower下载的 html2canvas是0.4.6版的 太古老了

在最新版中有提供scaledpi两个参数。。。

我们只需要 设置 dpi: window.devicePixelRatio就行了 见证奇迹吧!!!

完整代码

  html2canvas(
      dom[0], 
      {dpi: window.devicePixelRatio})
      .then(function (canvas) {
          var dataUrl = canvas.toDataURL("image/png", 1.0),
              newImg = document.createElement('img');
              newImg.src = dataUrl;
          $('#save-img').empty().append(newImg)
          newImg.style.width = '100%'
      })