zoukankan      html  css  js  c++  java
  • 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!

  • 相关阅读:
    实现实体类和Xml相互转化
    创建型设计模式之原型模式(Prototype)
    创建型设计模式之建造者模式(Builder)
    行为型设计模式之状态模式(State)
    行为型设计模式之职责链模式(Chain of Responsibility)
    行为型设计模式之解释器模式(Interpreter)
    行为型设计模式之模板方法(Template Method)
    结构型设计模式之享元模式(Flyweight)
    结构型设计模式之外观模式(Facade)
    获取必应壁纸
  • 原文地址:https://www.cnblogs.com/rainbowLover/p/14190436.html
Copyright © 2011-2022 走看看