需求： 
背景图片和二维码还有用户微信头像生成一张图片，可供用户下载。打开页面的时候就是一张图可以保存，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;}

生成的图片的样式层级设置到最高，发现跟图片差不多清晰了，终于解决了这个大坑！ 

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/5358