前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

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 生成的图片变模糊解决方案