vue3中,使用html2canvas截图包含视频、图片、文字的区域
需求:将页面中指定区域进行截图,区域中包含了图片、文字、视频。
第一步,先安装
npm install html2canvas
第二步,在页面引入:
import html2canvas from 'html2canvas';
第三步,页面使用:
1)html部分:
<div ref="imageWrapper" class="canvas_box"><videocrossorigin:src="`${bgVideoUrl}?_=${Date.now()}`"autoplaymutedloop></video><imgcrossorigin="anonymous":src="`${bgSrc}?_=${Date.now()}`"alt="插图"/><div><p>这是文字</p></div></div><div @click="screenshot">点击截图</div><img :src="screenshotUrl" alt="" />
2)js部分:
let imageWrapper = ref(null) //要截图的区域元素
let screenshotUrl = ref(null) //最终截出的图片
// 截图
function screenshot() {html2canvas(imageWrapper.value, {useCORS: true,// 使用跨域}).then((canvas) => {const imageDataURL = canvas.toDataURL('image/png');screenshotUrl.value = imageDataURLconsole.log(screenshotUrl.value)})
}
注意
刚开始我截出的图只有文字,插图和视频部分是空白的,并没有将页面的插图和视频截进去,最终发现是跨域导致的,最简单的方法当然是给服务器加个支持跨域的请求头。
但是我的图片和视频都是从阿里服务器拿的,是oss链接,加了支持跨域还是没用。
最终试了一下,给视频和图片全部加上crossorigin,并且在访问的地址后面加上随机参数,防止浏览器缓存图片,然后给html2canvas函数加上useCORS: true,使用跨越,这样截出来的图片就好啦~

相关文章:
vue3中,使用html2canvas截图包含视频、图片、文字的区域
需求:将页面中指定区域进行截图,区域中包含了图片、文字、视频。 第一步,先安装 npm install html2canvas第二步,在页面引入: import html2canvas from html2canvas;第三步,页面使用: 1&…...
后端神器!代码写完直接调试!
Apipost推出IDEA插件非常省时高效,写完代码直接可以进行调试,而且支持生成接口文档,真是后端神器啊! 可以点击下方链接安装更新或在插件商店中搜索安装 下载链接:https://plugins.jetbrains.com/plugin/22676-apipos…...
MATLAB | 万圣节来画个简单的可爱鬼叭!
万圣节要到啦一起来画个可爱鬼吧~ 代码比较的短: 完整代码 figure(Units,normalized,Position,[.2,.1,.52,.72]); axgca;hold on;axis off; ax.DataAspectRatio[1,1,1]; ax.YDirreverse; ax.XLim[0,100]; ax.YLim[0,100]; [X,Y]meshgrid(linspace(0,1,200)); Zsq…...
贪心算法学习------优势洗牌
目录 一,题目 二,题目接口 三,解题思路和代码 全部代码: 一,题目 给定两个数组nums1和nums2,nums1相对于nums2的优势可以用满足nums1[i]>nums2[i]的索引i的数目来描述。 返回nums1的任意排序,使其优…...
音视频rtsp rtmp gb28181在浏览器上的按需拉流
按需拉流是从客户视角来看待音视频的产品功能,直观,好用,为啥hls flv大行其道也是这个原因,不过上述存在的问题是延迟没法降到实时毫秒级延迟,也不能随心所欲的控制。通过一段时间的努力,结合自己闭环技术栈…...
Java 算法篇-深入了解二分查找法
🔥博客主页: 小扳_-CSDN博客 ❤感谢大家点赞👍收藏⭐评论✍ 目录 1.0 二分查找法的说明 2.0 二分查找实现的多种版本 2.1 二分查找的基础版本 2.2 二分查找的改动版本 2.3 二分查找的平衡版本 2.4 二分查找的官方版本 3.0 二分查找的应用 1…...
Data-Centric Financial Large Language Models
本文是LLM系列文章,针对《Data-Centric Financial Large Language Models》的翻译。 以数据为中心的大语言金融模型 摘要1 引言2 背景3 方法4 实验5 结论和未来工作 摘要 大型语言模型(LLM)有望用于自然语言任务,但在直接应用于…...
【HarmonyOS】服务卡片 API6 JSUI跳转不同页面并携带参数
【关键字】 服务卡片、卡片跳转不同页面、卡片跳转页面携带参数 【写在前面】 本篇文章主要介绍开发服务卡片时,如何实现卡片点击跳转不同页面,并携带动态参数到js页面。在此篇文章“服务卡片 API6 JSUI跳转不同页面”中说明了如果跳转不同页面…...
SQL server数据库端口访问法
最近数据库连接,也是无意中发现了这个问题,数据库可根据端口来连接 网址:yii666.com< 我用的是sql2014测试的,在安装其他程序是默认安装了sql(sql的tcp/ip端口为xxx),服务也不相同,但是由于比较不全,我…...
深孔枪钻厂家,科研管理系统思路
序号 名称 参数及技术指标 (一)系统性能要求 1.系统界面:支持中英文界面自由切换。 2. 系统兼容性:支持主流浏览器,如:IE11 以上、 360 安全浏览器、Firefox、Google Ch…...
【论文阅读笔记】GLM-130B: AN OPEN BILINGUAL PRE-TRAINEDMODEL
Glm-130b:开放式双语预训练模型 摘要 我们介绍了GLM-130B,一个具有1300亿个参数的双语(英语和汉语)预训练语言模型。这是一个至少与GPT-3(达芬奇)一样好的100b规模模型的开源尝试,并揭示了如何成功地对这种规模的模型进行预训练。在这一过程中࿰…...
Object常用方法
Object常用方法目录 1. equals(Object obj): 2. toString(): 3. hashCode(): 4. getClass(): 5. notify() 和 notifyAll(): 6. wait() 和 wait(long timeout): 7. clone(): 8. fina…...
【VR开发】【Unity】【VRTK】2-关于VR的基础知识
【概述】 在VRTK的实操讲解之前,本篇先介绍几个重要的VR认识。 【VR对各个行业的颠覆】 如果互联网几乎把所有行业都重做了一遍,VR在接下来的几年很可能再把现有的行业都重做一遍,包括但不限于教育,房地产,零售&…...
jeecg-uniapp 转成小程序的过程 以及报错 uniapp点击事件
uniapp 点击事件 tap: 单击事件 confirm: 回车事件 blur:失去焦点事件 touchstart: 触摸开始事件 touchmove: 触摸移动事件。 touchend: 触摸结束事件。 longpress: 长按事件。 input: 输入框内容变化事件。 change: 表单元素值变化事件。 submit: 表单提交事件。 scroll: 滚动…...
Django的静态文件目录(路径)如何配置?
通常用下面的三条语句配置Django的静态文件目录 STATICFILES_DIRS [os.path.join(BASE_DIR, static)] STATIC_URL /static/ STATIC_ROOT os.path.join(BASE_DIR, /static)那么这三条语句分别的作用是什么呢? 请参考博文 https://blog.csdn.net/wenhao_ir/articl…...
函数应用(MySQL)
--数值类函数 --绝对值 select abs(-1) --seiling ceil 向上取整 select ceil(1.1) --floor 向下取整 select floor(1.9); --四舍五入 select round(1.17, 1); --rand 随机数 select rand(rand()*1000); --字符串函数 utf8mb3 utfmb4 select length(小三) --查找字符数…...
数据分析过程中,发现数值缺失,怎么办?
按照数据缺失机制,数据分析过程中,我们可以将其分为以下几类: (1)完全随机缺失(MCAR):所缺失的数据发生的概率既与已观察到的数据无关,也与未观察到的数据无关。 &#x…...
Vue3.0 toRef toRefs :VCA模式
简介 作用: 创建一个ref对象,其value值指向另一个对象中的某个属性 语法: const name toRef(person, name) 应用: 要将响应式对象中的某个属性单独供应给外部使用时 扩展: toRefs与toRef功能一致,但可…...
VS Code提取扩展时出错。XHR failed
需求:想要在扩展中心下载插件,发现报错 原因:vs code之前设置了代理,需要删除即可...
大模型需要哪类服务器
大模型需要高性能的服务器,以支持大规模的计算和存储需求。一般来说,大模型需要以下类型的服务器: 大型机:大型机可以提供强大的计算能力,适合处理大规模的数据和复杂的计算任务。 GPU服务器:GPU服务器可以…...
Seed-Coder-8B-Base功能体验:支持多种主流编程语言补全
Seed-Coder-8B-Base功能体验:支持多种主流编程语言补全 你有没有过这样的时刻——写代码时,思路清晰,但手指却卡在重复的语法结构上?或者,面对一个熟悉的编程模式,却要手动敲出几十行几乎相同的代码&#…...
良心推荐!阿贝云免费云服务器,新手小白也能轻松上手
最近在折腾个人网站,想找个免费的云服务器练练手,试了好几家都不太满意。后来朋友推荐了阿贝云,体验下来感觉真的不错。 首先,阿贝云的免费云服务器配置很实在:1核CPU、1GB内存、5M带宽,还带独立公网IP。对…...
Hunyuan-MT-7B多语翻译实战:跨境电商独立站商品页SEO多语内容批量生成
Hunyuan-MT-7B多语翻译实战:跨境电商独立站商品页SEO多语内容批量生成 1. 项目背景与价值 跨境电商独立站面临的最大挑战之一,就是如何为不同语言市场的用户提供本地化的商品内容。传统的人工翻译方式成本高、效率低,而机器翻译又往往无法保…...
OpenClaw+Phi-3-vision智能相册:私人照片自动分类与摘要
OpenClawPhi-3-vision智能相册:私人照片自动分类与摘要 1. 为什么需要本地化的智能相册管理 去年夏天,我带着家人去海边度假,用手机拍了近千张照片。回来后面对杂乱的相册,花了整整两个周末才完成分类整理——这种痛苦经历让我开…...
Phi-4-mini-reasoning Chainlit用户体验优化:流式响应+打字机动画实现
Phi-4-mini-reasoning Chainlit用户体验优化:流式响应打字机动画实现 1. 项目背景与目标 Phi-4-mini-reasoning 是一个基于合成数据构建的轻量级开源模型,专注于高质量、密集推理的数据处理能力。作为Phi-4模型家族的一员,它支持128K令牌的…...
Phi-4-mini-reasoning vLLM部署避坑指南:日志排查、加载失败诊断与修复步骤
Phi-4-mini-reasoning vLLM部署避坑指南:日志排查、加载失败诊断与修复步骤 1. 模型简介与环境准备 Phi-4-mini-reasoning 是一个基于合成数据构建的轻量级开源模型,专注于高质量、密集推理的数据,并进一步微调以提高更高级的数学推理能力。…...
SecGPT-14B镜像免配置实战:开箱即用的网络安全大模型推理方案
SecGPT-14B镜像免配置实战:开箱即用的网络安全大模型推理方案 1. 为什么选择SecGPT-14B 在网络安全领域,专业知识的获取往往需要多年经验积累。SecGPT-14B作为一款专注于网络安全的大语言模型,能够为安全工程师、开发人员和IT运维人员提供即…...
RNA Clean-Up and Concentration Kits:适用于小RNA测序的RNA纯化与浓缩方案
在分子生物学研究中,RNA的纯度与浓度直接影响下游实验的成败。无论是从TRIzol等酚类试剂中提取的RNA,还是经过体外转录、DNase处理、标记反应等酶促步骤的样本,均可能残留影响后续实验的杂质。由艾美捷代理的Norgen Biotek推出的RNA Clean-Up…...
基于S7-1200PLC的物业供水控制系统设计》 PLC触摸屏,图纸,博图16 一、设计任务书...
基于S7-1200PLC的物业供水控制系统设计》 PLC触摸屏,图纸,博图16 一、设计任务书 1.自动工作时,当用水量少,压力增高,K 接通,此时可延时30s后撤除1台水泵工作,要求先工作的水泵先切断;当用水量多时,压力降低…...
BusyBox根文件系统制作避坑指南:如何让QEMU模拟的ARM板成功挂载你的第一个Linux系统
BusyBox根文件系统制作避坑指南:如何让QEMU模拟的ARM板成功挂载你的第一个Linux系统 当你在QEMU上启动一个精心编译的ARM Linux内核时,最令人沮丧的莫过于看到内核在挂载根文件系统时崩溃。作为嵌入式Linux开发的关键环节,根文件系统的构建往…...
