html2canvas 生成的图片变模糊解决方案

需求：

背景图片和二维码还有用户微信头像生成一张图片，可供用户下载。打开页面的时候就是一张图能够保存，html2canvas插件便可实现效果，效果是实现了，可是很郁闷，图片模糊了。。。。

为何会模糊？

网上介绍说明是： 原来浏览器的window变量中有一个devicePixelRatio的属性，该属性决定了浏览器会用几个像素点来渲染1个像素，举例来讲，假设devicePixelRatio的值为2，一张100x100像素大小的图片，在retina屏幕下，会用2个像素点的宽度去渲染图片的1个像素点，所以该图片在retina屏幕上实际会占据200x200像素的空间，至关于图片被放大了一倍，所以图片会变得模糊。知道了这一点，这个问题也就能理解了。当浏览器去渲染canvas的时候，他会用2个像素点的宽度去渲染canvas，所以在大多数retina设备的浏览器中会出现绘制的图片或文字变模糊的状况。

解决方案

1.先获取设备的PixelRatio，可参考hidpi-canvas提供的方法getPixelRatio.
2.将canvas的容器扩大PixelRatio倍，再将画布缩放，将图像放大PixelRatio倍。

部分代码

  

在项目中发现生成的图片仍是有点糊，还真是怪了，再看了下DOM结构，背景图是放在body中的，那既然背景图仍是糊，那改为图片。在DOM中放一个div,再把图片放在里面，div 下的图片设置样式{position:absolute;top:0;left:0;width:100%;height:100%:z-index:1;}，生成的图片的样式层级设置到最高，发现跟图片差很少清晰了，终于解决了这个大坑！踩坑的筒子请举手！！！

转载请注明：前端录»html2canvas 生成的图片变模糊解决方案