html2canvas图片模糊探索

---

web开发过程中，常常因为为了因为产品想突出自己的产品，所以分享海报，保存图片是常用的需求；那么自然就会想到能不能把常见的h5页面转换成图片；这样不仅可以满足要求，也能借助浏览器的能力长按保存等。

html2canvas 就是这样的一个很好的组件。详见其官网。

其api很简单，但是真的很实用：

官网图

具体api这边就不多说了，官网的解释也很明确。

于是就对其做了一些尝试；话不多说，直接上代码：

Component 组件： 

html

CSS部分：

less

JS部分：

运行的页面效果：

页面效果图

然后我们点击原图，通过html2canvas;生成一个对应的canvas，效果如下：

canvas

从效果来看，算是大功告成了，是不是很简单~ 但是仔细点看的话，会发现文字还行；但是图片和图片上的字明显有一些模糊了。然后产品说还要优化。

从网上搜一搜，发现很多人也有类似的困扰。也有相应的尝试；总结下来有：

方法1：自定义api中的canvas属性：

自定义api中的canvas属性

然后发现图片模糊的问题还是依旧；然后继续探索；

方法2：修改源码完善，比如这个大牛：

源码地址：https://github.com/eKoopmans/html2canvas/tree/develop/dist

新增了一个dpi属性。

方法3：从官网文档来看，其实在转换的时候，对一些css样式不是都是支持的；但是我这边的banner是用的background，应该算支持的吧~ 所以尝试把背景图换成用img的方式；惊奇的发现，果不其然，图片也不模糊了。

篇幅很少；只是简单记录。