vue 项目使用html2canvas插件进行截屏（截取iframe页面的一部分）

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量9.9k 收藏 27
点赞数 7
分类专栏： 前端杂记 文章标签： vue.js canvas html5 chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43831691/article/details/110877024
版权
遇到的问题在项目开发中有一个需求，用户上传一个时间线的数据，通过选择不同的模板，将时间线数据可视化。用户保存这个文件时，将模板预览图截取作为文件的封面。实现的思路最终的结果就是把相应的DOM转换成一张图片传回后台。关键难点在于如何把DOM转换成图片。然鹅，最难搞定的那部分已经有了一个较为成熟的框架html2canvas。项目时间比较急迫，自己封装canvas方法来截图的方式，后续尝试一下。获取iframe的dom结构将获取到的dom直接传给html2canvas,转换canvas调用toDat
摘要由CSDN通过智能技术生成

遇到的问题

在项目开发中有一个需求，用户上传一个时间线的数据，通过选择不同的模板，将时间线数据可视化。用户保存这个文件时，将模板预览图截取作为文件的封面。

实现的思路

最终的结果就是把相应的DOM转换成一张图片传回后台。关键难点在于如何把DOM转换成图片。然鹅，最难搞定的那部分已经有了一个较为成熟的框架html2canvas。项目时间比较急迫，先使用第三方插件，自己封装canvas方法来截图的方案，后续再尝试一下。

  • 获取iframe的dom结构
  • 将获取到的dom直接传给html2canvas,转换canvas
  • 调用toDataURL将canvas转换成图片base64格式
html

html结构

页面展示

在这里插入图片描述

实现步骤
  • 获取iframe的dom结构
const iframeHtml = this.$refs.timeLineDom.contentWindow // 获取iframe内容
const iframeBody = iframeHtml.docu
最低0.47元/天 解锁文章
网络大猩猩
关注
  • 7
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
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
html2canvas:使用JavaScript的屏幕截图
05-11
html2canvas JavaScript HTML渲染器 该脚本使您可以直接在用户浏览器上截取网页或其一部分的“屏幕快照”。 屏幕截图基于DOM，因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上可用的信息来构建屏幕截图。 订制 这是Erik Koopmans定制的版本，具有最新的错误修正和功能。 此处的所有更改均已作为“拉取请求”提交给niklasvh / html2canvas，正在等待批准。 这些更改包括：错误修正：，以及。 特点：和。 它是如何工作的？ 该脚本通过读取DOM和应用于元素的不同样式，将当前页面呈现为画布图像。 由于不需要在服务器上进行任何渲染，因为整个图像都是在客户端浏览器上创建的。 但是，由于它严重依赖于浏览器，因此该库不适合在nodejs中使用。 它也没有神奇地规避任何浏览器内容策略限制，因此呈现跨域内容将需要才能使内容具有
vue 使用 html2canvas 截屏并下载图片至本地（重点兼容ie浏览器）
飞翔༒之翼
05-06 506
html2canvas要做IE浏览器兼容
vue实现将iframe保存图片--html2canvas
huazi99的博客
03-19 2054
1、vue导入html2canvas npm install --save html2canvas 2、vue配置 main.js importhtml2canvasfrom'html2canvas' Vue.prototype.$html2canvas=html2canvas 3、iframe <iframeref="iframe"src='.。。/index.html'></iframe> 4、组件vue代码 download_if...
iframe截图html,javascript
weixin_39992660的博客
06-05 916
我正在尝试拍摄网页中iframe的屏幕截图。 在我的特定情况下，iframe包含我的客户商店之一的街景视图。 就我搜索和阅读而言，我没有找到任何解决方案。我知道有像Html2Canvas和Canvas2Image这样的JavaScript库，但是它们无法捕获iframe。这是我正在为此工作的小提琴。这些库可与除iframe之外的每个HTML元素一起正常使用。这是小提琴的JavaScript：$(f...
web自动化测试理论之frame、窗口截图、多窗口、验证码操作 -（4）
qq_39270023的博客
06-14 628
概念：HTML页面中的一种框架，主要作用是在当前页面中 指定区域显示另一页面元素形式：1、frameset形式 2、iframe标签形式 说明：在Selenium中封装了如何切换frame框架的方法作用：在⻚⾯中加载另⼀个⻚⾯为什么处理iframe(frane)？焦点默认在启动⻚⾯，如果不出处理iframe，⽆法操作iframe嵌⼊的⻚⾯元素。方法：1). driver.switch_to.frame(frame_reference) --> 切换到指定frame的方法frame_reference
vue页面截图；H5页面截图；vue项目中将特定网页内容生成图片(截图)；html2canvas截图
i_am_a_div的博客
10-26 1263
vue页面截图；H5页面截图；vue项目中将特定网页内容生成图片(截图)；html2canvas截图
vue3中使用html2canvas实现截图功能
cai_niao5623的博客
02-21 1746
vue3中使用html2canvas实现截图功能
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
weixin_32112641的博客
02-25 275
使用方法项目中引入npm install html2canvashtml代码//html代码js代码// 引入html2canvasimport html2canvas from 'html2canvas'// 注册组件components: {html2canvas},data () {return {htmlUrl: ''}},mounted () {// 如果页面一加载就需要生成图片,就在m...
vue 使用html2canvas将DOM转化为图片的方法
10-18
主要介绍了vue 使用html2canvas将DOM转化为图片的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中使用canvas方法总结
01-19
下面就是小编带给大家的Vue中怎么使用canvas方法操作，希望能够给你们带来一定的帮助，谢谢大家的观看。 1、如果数组中都是canvas对象, vue如何能吧canvas对象渲染到页面。v-html只能渲染出一个字符串, 没办法像...
html2canvas关于图片不能正常截取的解决方案
12-11
但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来。 官方文档 在项目里面操作了半天未果，google了半天未果。此时有些许绝望。突然想到了，为什么不去它的 官网...
html2canvas截图空白问题的解决
11-21
最近在项目中遇到一个需求，需要提供网页截图的功能。百度下发现html2canvas很好用。那就试试吧。 资源下载地址 插件下载地址：html2canvas下载地址 使用方式 项目使用的react组件开发方式。参照官方的说明文档...
js 调用谷歌插件截图跨域的iframe---FireShot
xn的博客
08-22 1562
js调用截图插件
js实现纯前端截屏（可以对iframe的内容进行截取）
热门推荐
D_bel的博客
06-02 1万+
1. 最近在碰到一个需求需要，在系统中增加一个可以对系统页面进行自由截图的功能，又不通过后端辅助，开始在网上找资源发现一个叫kscreenshot的插件可以实现截屏（https://github.com/kejiacheng/kscreenshot），这个工具已经集成了添加标注等功能，比较接近qq和微信自带的截图功能，但是坑爹的是这个工具不能在ie下运行，也不能对iframe下的内容进行截取，无法满足需求，次数pass掉，只能另谋它路了。 2.继续找资源，发现可以使用crop...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 354
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
vue3使用html2canvas
10-26
在Vue3中使用html2canvas插件需要注意以下几点： 1. 首先需要安装html2canvas插件，可以使用npm或yarn进行安装。 2. 在需要使用html2canvas的组件中引入插件：import html2canvas from 'html2canvas'; 3. 在组件中使用html2canvas生成图片时，需要获取元素高度，确保生成图片时不会出现问题，可以使用domObj.clientHeight或者ref获取元素的高度。 4. 在调用html2canvas函数时，需要设置useCORS: true，以解决跨域问题。 5. 最后，可以将生成的图片作为组件的data或props进行传递和使用。 下面是一个简单的Vue3组件中使用html2canvas生成图片的示例代码： <template> <div ref="postHtml"> <!-- 需要生成图片的内容 --> </div> <button @click="generateImage">生成图片</button> <img :src="imageSrc" alt="生成的图片"> </template> <script> import html2canvas from 'html2canvas'; export default { data() { return { imageSrc: '', }; }, methods: { generateImage() { const postHtml = this.$refs.postHtml; html2canvas(postHtml, { useCORS: true, height: postHtml.clientHeight, }).then(canvas => { this.imageSrc = canvas.toDataURL(); }); }, }, }; </script>
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值