您现在的位置是:首页 > 正文

react html2canvas 遇到的坑

2024-02-01 04:15:44阅读 2

html2canvas  https://html2canvas.hertzen.com

1. svg 图片导出后样式不全

    这是由于html2canvas  读取dom树时不会读取svg标签外面的样式。

    1)简单粗暴的修改方法就是编辑svg将样式直接编辑在svg图片之内。

    2)使用html2canvas onclone 回调在读取dom树后重新给svg写入样式。

           这种方法可以参考这位大神的 https://www.welefen.com/post/html2canvas-with-svg.html

    3)使用ReactSVG 在界面初始化后把样式写入svg

          ReactSVG  https://www.npmjs.com/package/react-svg

          该控件在svg加载后回调  beforeInjection 方法

       

<ReactSVG className="logo" src={this.getUrl("logo_black")} beforeInjection={this.logoBeforeInjection}/>

        为了适应不同的手机分辨率可以再回调中根据屏幕显示倍率计算尺寸

        

logoBeforeInjection = svg=>{
    // svg.classList.add('svg-class-name')
    // svg.setAttribute('style', 'width: 123px; height="171px')
    const pixe = window.devicePixelRatio as number

    svg.setAttribute('width',41*pixe+'px')
    svg.setAttribute('height',57*pixe+'px')
}

 

2. ios 微信浏览器内html2canvas 无法使用。

    这个将html2Canvas 改成旧版本rc4 就行 https://github.com/niklasvh/html2canvas/issues/2205

 v1.0.0-rc.4 地址 https://github.com/niklasvh/html2canvas/releases/tag/v1.0.0-rc.4

       

 

 

 

 

 

 

   

网站文章

  • MTK 开启DISP LOG

    需要执行如下命令: adb shell “echo dbg_log:1 > /d/dispsys”

    2024-02-01 04:15:36
  • 超详细的Windows新装机流程(自装Windows系统、设置BIOS等)

    超详细的Windows新装机流程(自装Windows系统、设置BIOS等)

    一、BIOS常规设置 新装机涉及到的BIOS常规设置有哪些? 主要是2方面的设置 (1)CMS兼容性支持模块,请设置【Enabled】,即是开启了CSM: 部分主板若是使用集显,CSM显示灰色,这是由...

    2024-02-01 04:15:28
  • mootools_介绍MooTools模板化

    mootoolsOne major problem with creating UI components with the MooTools JavaScript framework is that...

    2024-02-01 04:14:58
  • ONOS架构中的YANG、P4 Runtime

    ONOS架构中的YANG、P4 Runtime

    本文总结自毛健炜的“ONOS架构中的YANG、P4 Runtime”的演讲 ONOS,全称是开放网络操作系统,通常以控制器的身份为人所知。 它是由ON.LAB组织发起的一个开源项目,在与ONF组织合并...

    2024-02-01 04:14:51
  • maven命令行查看项目依赖jar包以便排除依赖冲突

    maven命令行查看项目依赖jar包以便排除依赖冲突

    2024-02-01 04:14:18
  • PAT A1100:Mars Numbers

    题目描述1100 Mars Numbers (20分)People on Mars count their numbers with base 13:Zero on Earth is called “...

    2024-02-01 04:14:10
  • 服务器芯片都是x86,别的都是扯 x86仍然是商用处理器的主流

    服务器芯片都是x86,别的都是扯 x86仍然是商用处理器的主流

    处理器市场从来都是兵家必争之地。为何呢?因为抢占了处理器这个核心无疑牢牢把控了市场的发展趋势。PC时代的英特尔,移动时代的ARM都像人们展示了抢占处理器市场的重要性。而对于当前的企业级IT市场,处理器...

    2024-02-01 04:14:04
  • 数据库MYSQL安装和配置详解

    数据库MYSQL安装和配置详解

    数据库MYSQL安装详解1、打开下载的mysql安装文件mysql-5.5.27-win32.zip,双击解压缩,运行“setup.exe”。2、选择安装类型,有“Typical(默认)”、“Comp...

    2024-02-01 04:13:35
  • 使用java方式配置Spring

    使用java方式配置Spring

    使用java文件代替xml配置文件,并结合注解的使用,彻底摆脱xml,从而迎接SpringBoot的到来

    2024-02-01 04:13:28
  • 聊聊Vue中的数据代理

    聊聊Vue中的数据代理

    今天和大家聊聊Vue中的数据代理,什么是数据代理数据代理:通过一个对象代理对另外一个对象中属性的操作Object.defineProperty 这个方法也是Vue数据双向绑定原理的常见面试题。

    2024-02-01 04:13:19