程序员经验分享-hwhale

前端html2canvas和dom-to-image实现截图功能

2023-10-30

目录

需求

历劫过程

截图知识点

html2canvas

文档地址

封装

使用教程 

dom-to-image-more

文档地址

封装

使用教程

解决跨域问题

以下是我花了大把时间，薅秃头得出来的最终结果， dom-to-image-more截图时间快到可以让复杂的页面仅需2-3S就能完成截图，内容有点多，请保持耐心慢慢看。

需求

用户想要反馈平台当前页面的各种问题，所以系统的反馈功能需要提供一个一键截图并上传图片的功能。

历劫过程

一开始系统使用的是html2canvas，但是会出现以下一些问题：

  • 截图时间过长
  • 图片会出现样式错乱
  • 不能支持截取micoapp嵌入的页面
  • 图片内数据缺失

后来，准备替换掉这个组件，开始调研，发现dom-to-image组件看着还不错的样子，但是据说也存在一些问题，而它的升级版dom-to-image-more优化了不少功能，所以开始采用dom-to-image-more，不过调研过程中，也发现它存在一下问题：

  • 图片中svg-icon（雪碧图组件）空白
  • 系统中图片采用阿里云服务器存储，需要修改js文件（代码看下面）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

插件使用

html2canvas

domtoimage

前端

截图

前端html2canvas和dom-to-image实现截图功能 的相关文章

  • CMAKE_MAKE_PROGRAM is not set 解读

    目录 CMAKE MAKE PROGRAM 未设置 错误原因 解决方案 示例1 GNU Make 示例2 Ninja CMakeLists txt 的结构 示例 CMakeLists txt 文件 总结 CMAKE MAKE PROGRAM

  • CTF之逆向入门

    逆向工程 Reverse Engineering 又称反向工程 是一种技术过程 即对一项目标产品进行逆向分析及研究 从而演绎并得出该产品的处理流程 组织结构 功能性能规格等设计要素 以制作出功能相近 但又不完全一样的产品 逆向工程源于商业及

  • 【面试】 前端竞争压力大？揭秘让你们学后端的真实动机！

    前端开发属于程序员吗 网友是这样回答的 看完前端同学的评论 我悟了 你们让人都去学后端卷 然后减小前端竞争压力是吧 哈哈哈 你们这帮老6 于是我去拿出了我收藏的 某前端招聘JD来盘一盘 那些觉得 是个人都能干前端 的同学们想必已经熟练掌握了

  • JS特效第74弹：旅游城市图片百叶窗切换React特效

    全屏的旅游城市景点图片滑动百叶窗轮播切换效果 先来看看效果 一部分关键的代码如下 div div

  • ECMAScript简介及特性介绍

    ECMAScript 简称ES 是JavaScript的规范 同时也是被广泛采用和实现的脚本语言标准 从最初的1996年推出第一版至今 ECMAScript已经经历了数十年的发展和改进 成为了互联网开发中的重要基石之一 本文将对ECMASc

  • 「网络安全渗透」如果你还不懂CSRF？这一篇让你彻底掌握

    1 什么是 CSRF 面试的时候的著名问题 谈一谈你对 CSRF 与 SSRF 区别的看法 这个问题 如果我们用非常通俗的语言讲的话 CSRF 更像是钓鱼的举动 是用户攻击用户的 而对于 SSRF 来说 是由服务器发出请求 用户 日 服务器

  • 低代码配置-列表页组件设计

    保存 表单属性存放 bill 筛选项配置存放 filterLayout 列表按钮存放 buttonLayout 列表布局存放 listLayout api存放 api 数据结构 layout 存放表单基础配置 bill 存放按钮基础配置 b

  • 30天精通Nodejs--第十九天：express-文件上传下载

    目录 前言 环境准备与依赖安装 文件上传功能实现 引入并配置express fileupload中间件 注意事项 文件下载功能实现 结语 前言 文件的上传和下载是许多应用程序必备的功能 Node js的Express框架同样可以通过集

  • 考虑光伏出力利用率的电动汽车充电站能量调度策略研究（Matlab代码实现）

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码 数据

  • 【js学习之路】遍历数组api之 `filter `和 `map`的区别

    一 前言 数组是我们在项目中经常使用的数据类型 今天我们主要简述作用于遍历数组的api filter 和 map 的区别 二 filter和map的共同点 首先 我们主要阐述一下 filter 和 map 的共同点 api的参数都是回调函数

  • 如何在 Python 脚本中使用 Google OAuth2

    在使用 Python 脚本将视频上传到 YouTube 频道时 若希望将视频上传到第二个频道 需要解决 OAuth2 授权的问题 解决方案 创建新的 Google Cloud 项目 from google oauth2 import ser

  • 如何在 Python 脚本中使用 Google OAuth2

    在使用 Python 脚本将视频上传到 YouTube 频道时 若希望将视频上传到第二个频道 需要解决 OAuth2 授权的问题 解决方案 创建新的 Google Cloud 项目 from google oauth2 import ser

  • 使用 PHPMailer 和 html2pdf 通过电子邮件发送 PDF 数据

    我尝试通过电子邮件发送 PDF 或 PNG 但似乎没有任何效果 以下是我最后的尝试 我已经阅读了这里的每一篇文章 但没有任何建议起作用 有人可以帮忙吗 我正在使用 PHPMailer html2pdf 和 html2canvas 这两个都可

  • 使用 Javascript 生成高质量 PDF (jspdf+html2canvas)

    我一直在尝试通过单击页面上的按钮从 HTML 页面转换并生成 PDF 该按钮会使用两个流行的插件自动生成并强制下载页面的 PDF JSPDF HTML2Canvas 到目前为止 一切正常 但生成的 PDF 总是模糊且质量不高 导入 js 文

  • 如何将 iframe 转换为画布？

    我正在尝试将所有内容作为图像保存到另一个页面中 我已经探索了执行此操作的方法 因此我认为我需要首先将该页面转换为画布 因此 我尝试使用要先将其保存为 iframe 的链接 然后将 iframe 转换为画布 但它不起作用 document r

  • 如何使用 jsPDF 和 HTML2Canvas 从网站获取多页 pdf？

    我有一个使用 HTML2Canvas 来截取屏幕截图的脚本div在页面中 然后使用 jsPDF 将其转换为 pdf 问题是生成的 pdf 只有一页 而屏幕截图在某些情况下需要不止一页 例如 屏幕截图大于 8 5x11 宽度很好 但我需要它来

  • HTML2canvas 和 Canvas2image，下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3

  • 获取 pdf 第 1 页（共 2 页）的图像

    我正在使用 html2canvas 和 jsPDF 以及 Angular4 创建图像 我想将此图像放置在 2 页生成的 pdf 的第 1 页上 但似乎这条线 doc save test pdf 需要在函数内部htm2canvas 因为如果我

  • Html2canvas 忽略图像的对象拟合

    我一直在尝试利用 html2canvas 来截取元素的屏幕截图 我注意到 div 元素内使用 object fit 属性的图像在 html2canvas 屏幕截图后被拉伸 有没有为此散步 这是我的代码

  • 如何在网站上使用 svg 元素制作块的屏幕截图？

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定

随机推荐

  • Windows下批处理文件(.bat)的使用

    批处理 Batch 就是进行批量的处理 英文译文BATCH 批处理文件后缀BAT就取的前三个字母 通常被认为是一种简化的脚本语言 它应用于DOS和Windows系统中 批处理文件是扩展名为 bat或 cmd的文本文件 包含一条或多条命令 由

  • idea快捷键设置（Idea常用快捷键大全）

    目录 友情提醒 第一章 IDEA常用快捷键 1 1 快捷键 查找 提示类 1 2 快捷键 修改代码类 1 3 快捷键 光标移动类 第二章 Idea如何修改快捷键 2 1 已知快捷键 通过搜索快捷键查找 2 2 已知快捷键含义 通过输入快捷键

  • SpringBoot 如何实现多文件的上传和下载

    在前面的文章中 我们介绍了如何在Spring Boot中实现单个文件的上传和下载 但是 有时候我们需要实现多个文件的上传和批量下载 本文将介绍如何在Spring Boot中实现多文件上传和批量下载的功能 多文件上传 在Spring Boot

  • 通过transpose和flip实现图像旋转90/180/270度

    在fbc cv库中 提供了对图像进行任意角度旋转的函数rotate 其实内部也是调用了仿射变换函数warpAffine 如果图像仅是进行90度倍数的旋转 是没有必要用warpAffine函数的 这里通过transpose和flip函数实现对

  • 上网流量不够用，办无限流量卡吗？python程序员教你暴力破解wifi

    流量不够用怎么办 随着时代的发展 流量也是越来越不够用了 办无限网卡吗 月租太贵不划算 还是用Wi Fi舒服 不用担心流量用没了 今天用python教大家写一个暴力破解Wi Fi的程序 Wi Fi在手 天下我有 上网流量不够用 办无限流量卡

  • STM32中断优先级彻底讲解

    一 综述 STM32 目前支持的中断共为 84 个 16 个内核 68 个外部 16 级可编程中断优先级的设置 仅使用中断优先级设置 8bit 中的高 4 位 和16个抢占优先级 因为抢占优先级最多可以有四位数 二 优先级判断 STM32

  • STM32:寄存器概念

    目录 1 STM32长什么样 2 STM32内部有什么 2 1 STM32芯片架构简图 3 存储器映射 3 1 什么叫存储器映射 3 2 让GPIOB端口的16个引脚输出高电平 要怎么实现 4 什么是寄存器 4 1 总线基地址 4 2 寄存

  • 63万张！旷视发布最大物体检测数据集Objects365，物体检测竞赛登陆CVPR

    郭一璞 发自 北京会议中心 量子位 报道 公众号 QbitAI 比ImageNet大的图像数据集来了 在4月16日的智源学者计划启动暨联合实验室发布会上 旷视科技发布了通用物体检测数据集Objects365 包含63万张图像 远超Image

  • python 基础之注释变量常量

    一 注释 注释 就是对代码的解释 方便大家阅读代码 1 注释的分类 1 单行注释 在python中在行首添加一个 号就将这一行进行注释 单行注释 用 开头 后面跟上任意字符串 python2 版本print 这个函数 语法如下 print

  • java中File类

    转自http shameant iteye com blog 163007 Java文件操作我个人认为重要的问题有 a 如何跨平台问题 b 文件编码问题 尤其是多语言平台情况下如何正常工作 c 文件读写效率 操作效率 d 文件加密和文件安全

  • STM32CubeMX+FreeRTOS学习笔记(一)

    嵌入式实时操作系统FreeRTOS 基本概述 在嵌入式领域当中 实时操作系统的应用越来越广泛了 目前嵌入式操作系统种类很多 例如 Clinux C OS II C OS III FreeRTOS RT Thread等等 这篇文章所记录的就是

  • python自动拷贝U盘文件（打包成exe）

    大家好 欢迎阅读此文档 从零实现利用python工具实现自动拷贝U盘里的文件 打包成exe文件程序 exe程序是windows系统兼容的程序 运行程序的电脑不需要安装python就能实现 新手也能完成 提示 熟悉python工具的可直接跳转

  • .3ds 文件转 glb 或 gltf

    拿到一个3d模型 是 3ds 文件和一堆png的纹理图片 要在cesium中显示 cesium中支持这个格式 需要转化成支持的glb 或 gltf格式 目录 一 在3dmax中导入 并显示贴图纹理 二 转换成fbx 再转换成obj 三 在B

  • layui代码生成器，后台layui表单生成器代码复制即用，添加编辑一体，可条件判断

    下载资源 查看视频演示https www bilibili com video BV1CG411n7Lk 直接上图 重新编辑只需要点击编辑现有页面把之前生成出来的代码粘贴进去就行 使用方式 放在服务器根目录访问域名 tfForm index

  • 【计算机网络系列】物理层②：信道复用技术（频分复用、时分复用、波分复用及码分复用）

    本文主要介绍物理层中的信道复用技术 包括频分复用 时分复用 波分复用及码分复用技术 以及简单谈谈数字传输系统和几种宽带接入技术 信道复用技术 复用 multiplexing 是通信技术中的基本概念 计算机网络中的信道广泛地使用各种复用技术

  • 自定view实践(一) 自定义loadingView

    昨天同事遇到如下效果的加载view 实现了一下 1 首先创建一个类继承view public ProgreesView Context context this context null public ProgreesView Contex

  • html 修改mate标签禁止页面缩放

    html5 默认的mate标签 禁止时可以修改成 这样就可以解决移动端双击或者两根手指滑动是页面方大或者缩小的问题了

  • 目标检测：OneNet: Towards End-to-End One-Stage Object Detection

    目录 算法介绍 算法训练 算法介绍 OneNet算法的优点 1 全卷积 端到端 没有ROI 操作 也没有 attention 机制 2 标签分配是通过最小代价策略 不需要复杂的人工设计或者启发 3 没有任何后处理 比如 NMS max po

  • 本月与上月对比公式_Tableau 环比 for 本月某一段时间 与 上月同一段时间

    来源 https interworks com blog estam 2017 04 05 compare incomplete month same days previous month tableau April 5 2017 by

  • 前端html2canvas和dom-to-image实现截图功能

    目录 需求 历劫过程 截图知识点 html2canvas 文档地址 封装 使用教程 dom to image more 文档地址 封装 使用教程 解决跨域问题 以下是我花了大把时间 薅秃头得出来的最终结果 dom to image more

热门标签