自从有了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版的 太古老了

在最新版中有提供scale和dpi两个参数。。。

我们只需要 设置 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%'
      })