html2canvas导出图片模糊

最近在做将html渲染的界面导出为图片或者pdf文件

实现思路有三(另外还有需要后台配合的,没有研究就不写了):

一:用系统或者聊天工具的截屏功能,这和代码就没关系了,但优点是不需要前端任何操作,也不需要后台任何配合;

二:用插件html2canvas库,优点是不需要后端配合;

三:也是插件dom-to-image,和方式二一样不需要后台操作;

其中dom-to-image不支持ie和edge浏览器,但效率要比html2canvas高一丢丢,bug也少,但就因为不兼容edge或者是因为bug少搜索到的信息也较少,要不是项目必须兼容edge我就用它了!

html2canvas的bug多:什么导出是空白了,丢失dom了,页面卡死了,问题太多了:

现在就来细数html2canvas的缺陷:

1. 导出会空白偶尔出现,还没处理,有空再说;

2. 丢失dom,导出的图片缺少一些页码信息:追踪下发现a标签包裹的文本内容导出来就丢失,那有啥办法,替换标签呗,替换成span标签然后把样式搞过去就o了;

3. 页面卡死:本来项目就大,插件里边还递归dom树copy节点,所以变得非常卡,谷歌和火狐浏览器导出一个界面需要4-6秒,edge导出一个界面需要6-8分钟,所以给用户的感觉就是我的edge咋卡死了?这个也还没解决;

4. 然后是导出界面模糊,网上也有很多解决方式,但这些方式只是给了个思路,你要是不看版本直接copy就会发现:图片是清晰了,但怎么不全了?或者是空白了一大片!下面细说下解决思路:

  a.转化时候传入配置参数,新建一个canvas的dom对象,对象放大两倍,然后还有个配置参数叫sacle就是缩放比例,这个缩放比例默认会按照浏览器的像素密度去执行,当然你也可以指定,例如现在就指定为2,

  b.刚好画布放大两倍,缩放也是2,导出的图片就刚刚好不留白也不缺失;

  c. 具体代码就不粘了,还是那句话,用任何第三方的东西,就去看人家的文档,别网上瞎几把搜,文档解决不了了就去看源码,网上搜不算好汉!

接下来沾几个我试了但不行的解决方案:

1. 这个dpi这个配置项都已经废弃了,传了也没用,这个方案的及俄国是截取的图片只有1/4,

2.没找到,就是这个作者写的时候应该还不支持promise,你能直接copy过来用?

假装是图片

over!

原文地址:https://www.cnblogs.com/rainbowLover/p/14190436.html