dom-to-image.js 源码修改实现多iframe嵌入网页截图

最新推荐文章于 2024-05-31 18:11:37 发布

天游冰

最新推荐文章于 2024-05-31 18:11:37 发布

阅读量1k

点赞数

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_43560515/article/details/125580104

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

纯前端js脚本实现网页截图的工具主要有html2canvas和om-to-image。然而，两者在有iframe嵌入的网页里，实现截图，图片里iframe部分会显示空白。幸亏本人在canvas有些基础，所以决定修改源码。

先说思路，即将每个子页面分别截图，然后将截图嵌入到父页面的截图里。以此类推，直到最上级页面。

东西是修改了许多，直接上效果。

我是直接把截图后的canvas覆盖到了网页上，对比一下，位置上有些偏移，效果可以接受。

文件下载：https://download.csdn.net/download/qq_43560515/85871723

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

天游冰

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
dom-to-image.js 源码修改实现多iframe嵌入网页截图

前度网页有iframe嵌入的截图功能
复制链接

扫一扫

专栏目录

iframe 返回上一页_前端实现最佳截图方案（上）

weixin_39707851的博客

11-29

573

作者：蜀中亮子转发链接：https://mp.weixin.qq.com/s/ghXm-dySERTFsXEWw79afA“旧闻重发，由于上一次的图片有些糊，这次分为上下两篇发送，不至于阅读压力太大”开篇平时很多时候，需要把当前页面或者页面某一部分内容保存为图片分享出去，也或者有其他的业务用途，这种在很多的营销场景和裂变的过程都会使用到，那我们要把一个页面的内容转化为图片的这个过程，就是比较需要探...

iframe截取网站的部分内容

nuptsv_ice的专栏

06-12

5455

3 条评论您还未登录，请先登录后发表或查看评论

js将dom转图片或文件

最新发布

IT菜鸟

05-31

340

dom-to-image库使用优点：体积小，使用简单。

mydomtoimage.js

07-03

dom-to-image.js 个人修改源码之后，支持嵌入iframe的网页截图。导入js，直接调用shotScreen()函数即可。

dom-to-image.js 页面截图

张小胖

02-06

3021

dom-to-image.js 页面截图解决： dom-to-image.js 视频标签 video 不显示解决： dom-to-image.js svg 标签不显示解决： dom-to-image.js 图片链接失效报错

Dom-to-image

SeriousLose

07-26

1379

实现原理使用svg的一个特性，允许在<foreignobject>标签中包含任意的html内容。主要是 [XMLSerializer |dom转为svg] dom 转换为XHTML XMLSerializer 对象使你能够把一个 XML 文档或 Node 对象转化或“序列化”为未解析的 XML 标记的一个字符串 ...

Chrome插件之DomToImage实现网页dom结构渲染输出图片

weixin_33948416的博客

03-13

680

I. 说明有些时候，看到一些网页的信息时，想分享给小伙伴，一般直接用截图工具来做，但是当分享的内容比较长时，截图就比较蛋疼了，所以想着做了这么个插件可以将网页中任意一个dom结构，渲染为图片 1. 实现主要借助开源包: dom-to-image来实现基本实现原理：在网页中插入一段html代码，然后绑定上点击事件，核心逻辑如下 $("body").append('<div id=...

domtoimage.js

07-31

domtoimage图片下载插件,用于将dom节点转换成图片,然后就可以下载下来

dom-to-image.js

07-27

一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错

dom-to-to-retina视网膜：dom-to-to-retina，但生成高分辨率图像

03-04

用法import { toPng , toJpeg , toBlob } from "dom-to-image-retina"const dataUrl = await toPng ( el , options )const dataUrl = await toJpeg ( el , options )const blob = await toBlob ( el , options )执照...

html-to-image:学习 html-to-image

05-30

4. **模块化**：`index.js`文件通常包含模块的主入口，`domtoimage`作为一个模块，可以被其他JavaScript文件导入和使用。 5. **异步编程**：JavaScript中的异步编程是关键，特别是在处理I/O操作如文件读写和网络...

iframe-to-png:用于从iframe制作屏幕截图的Node程序

05-25

将iframe转换为png 该程序使用npm-puppeteer puppeteer制作html页面（在我们的用例中，我们使用iframe）的屏幕截图。正在将iframe转换为png 运行npm install （可选）将index.html中的iframe替换为目标iframe 在一个终端选项卡中，运行node index.js 。这将在浏览器中提供html。在第二个终端选项卡中，运行node puppeteer.js 。此命令启动创建屏幕快照的puppeteer，并将屏幕快照保存在root目录中，例如example.png

react.js、react-dom.js、babel.js文件包下载

02-22

React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前，让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...

dom-to-img 学习记录(网页截屏)

weixin_45052838的博客

10-10

853

最近看同事做了一个需求觉得比较有意思，就看了看相关代码，简单学习下。需求：点击截屏按钮将页面内容以图片形式下载下来形成截屏不止一种方式实现，我使用了dom-to-img进行演示 dom-to-img文档链接以下代码使用react函数组件加载dom-to-img yarn add dom-to-img or npm install dom-to-img 项目中引用 /* in ES 6 */ import domtoimage from 'dom-to-image'; /* in ES 5

domtoimage踩坑日记

BelieveYzy的博客

12-25

2677

domtoimage插件截图文件损坏情况的原因和处理方式

js实现纯前端截屏（可以对iframe的内容进行截取）

热门推荐

D_bel的博客

06-02

1万+

1. 最近在碰到一个需求需要，在系统中增加一个可以对系统页面进行自由截图的功能，又不通过后端辅助，开始在网上找资源发现一个叫kscreenshot的插件可以实现截屏（https://github.com/kejiacheng/kscreenshot），这个工具已经集成了添加标注等功能，比较接近qq和微信自带的截图功能，但是坑爹的是这个工具不能在ie下运行，也不能对iframe下的内容进行截取，无法满足需求，次数pass掉，只能另谋它路了。 2.继续找资源，发现可以使用crop...

如何使用 JS 截图 iframe？

qq_31813401的博客

03-08

913

在函数的回调函数中，我们将生成的 canvas 元素添加到了指定的存储区域中，并在控制台上打印了 base64 格式的图片数据。其中，html2canvas 是一个用于将网页内容转换为 canvas 元素的库，而 jQuery 则是一个常用的 JavaScript 库，用于简化 DOM 操作。首先，如果 iframe 的 src 属性指向了外部网页，由于跨域原因，我们无法对其进行截图。其次，即使是对自己的网页进行截图，如果加载了外部图片，同样会因为跨域问题而导致部分截图失败。希望本文对你有所帮助！

html2canvas插件在iframe中使用的优化

band129

01-14

5296

html2canvas插件在iframe中使用的优化

html2canvas以及domtoimage的使用踩坑总结

BigChicken3的博客

03-15

1255

背景有个需求需要通过代码下载整个dom结构，所以我一开始使用html2canvas，但是发现在安卓中是可以的，在iOS8以上版本会出现截图整个页面空白的情况，于是为搜了很多资料，最后发现一个博主的总结踩坑跟我基本差不多，博主链接：https://segmentfault.com/a/1190000015992221，下来开始进入正题一、html2canvas对于跨域图片，转换的时候会将跨域图片...

dom-to-image截屏iframe空白问题

12-23

dom-to-image是一个用于将DOM元素转换为图像的Javascript库。当使用dom-to-image截取包含iframe的网页元素时，可能会遇到截取出来的图像为空白的问题。这个问题通常是由于跨域限制导致的。要解决这个问题，可以尝试以下几种方法： 1. 确保iframe内的内容与主页面同源：如果iframe内的内容与主页面不同源，可能会受到同源策略的限制，导致无法正确截取iframe内的内容。可以尝试将iframe内的内容与主页面保持同源，或者在服务器端进行代理转发。 2. 使用iframe的srcdoc属性：将iframe的src属性替换为srcdoc属性，srcdoc属性可以直接接受HTML内容作为值，从而避免跨域限制。 3. 使用iframe的contentWindow属性：通过获取iframe的contentWindow属性，可以直接访问iframe内的内容，然后使用dom-to-image对iframe内的内容进行截取。 4. 询问网站所有者：如果网站上的iframe内容不受用户控制，例如第三方网站的iframe，可以尝试联系网站所有者，请求他们提供跨域权限或者其他解决方案。总之，截取包含iframe的网页元素时出现空白问题，通常是由于跨域限制导致的，可以尝试使用上述方法解决。同时，也要注意保护用户隐私和遵守网站的使用规定，避免违反同源策略和跨域权限。