html2canvas 不高清?模糊?

2018-01-31 Ryan

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

  • 上传预览
    以前我们上传预览的时候都必须先把图片上传发送给后台,然后后台再返回给我们一个图片url 我们再展示在前台,更别说要截取部分内容了 来来回回至少要2次ajax往来(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%'
})