当前位置: 首页 > news >正文

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截图包含视频、图片、文字的区域

需求&#xff1a;将页面中指定区域进行截图&#xff0c;区域中包含了图片、文字、视频。 第一步&#xff0c;先安装 npm install html2canvas第二步&#xff0c;在页面引入&#xff1a; import html2canvas from html2canvas;第三步&#xff0c;页面使用&#xff1a; 1&…...

后端神器!代码写完直接调试!

Apipost推出IDEA插件非常省时高效&#xff0c;写完代码直接可以进行调试&#xff0c;而且支持生成接口文档&#xff0c;真是后端神器啊&#xff01; 可以点击下方链接安装更新或在插件商店中搜索安装 下载链接&#xff1a;https://plugins.jetbrains.com/plugin/22676-apipos…...

MATLAB | 万圣节来画个简单的可爱鬼叭!

万圣节要到啦一起来画个可爱鬼吧~ 代码比较的短&#xff1a; 完整代码 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…...

贪心算法学习------优势洗牌

目录 一&#xff0c;题目 二&#xff0c;题目接口 三&#xff0c;解题思路和代码 全部代码&#xff1a; 一&#xff0c;题目 给定两个数组nums1和nums2,nums1相对于nums2的优势可以用满足nums1[i]>nums2[i]的索引i的数目来描述。 返回nums1的任意排序&#xff0c;使其优…...

音视频rtsp rtmp gb28181在浏览器上的按需拉流

按需拉流是从客户视角来看待音视频的产品功能&#xff0c;直观&#xff0c;好用&#xff0c;为啥hls flv大行其道也是这个原因&#xff0c;不过上述存在的问题是延迟没法降到实时毫秒级延迟&#xff0c;也不能随心所欲的控制。通过一段时间的努力&#xff0c;结合自己闭环技术栈…...

Java 算法篇-深入了解二分查找法

&#x1f525;博客主页&#xff1a; 小扳_-CSDN博客 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 目录 1.0 二分查找法的说明 2.0 二分查找实现的多种版本 2.1 二分查找的基础版本 2.2 二分查找的改动版本 2.3 二分查找的平衡版本 2.4 二分查找的官方版本 3.0 二分查找的应用 1…...

Data-Centric Financial Large Language Models

本文是LLM系列文章&#xff0c;针对《Data-Centric Financial Large Language Models》的翻译。 以数据为中心的大语言金融模型 摘要1 引言2 背景3 方法4 实验5 结论和未来工作 摘要 大型语言模型&#xff08;LLM&#xff09;有望用于自然语言任务&#xff0c;但在直接应用于…...

【HarmonyOS】服务卡片 API6 JSUI跳转不同页面并携带参数

【关键字】 服务卡片、卡片跳转不同页面、卡片跳转页面携带参数 【写在前面】 本篇文章主要介绍开发服务卡片时&#xff0c;如何实现卡片点击跳转不同页面&#xff0c;并携带动态参数到js页面。在此篇文章“服务卡片 API6 JSUI跳转不同页面”中说明了如果跳转不同页面&#xf…...

SQL server数据库端口访问法

最近数据库连接&#xff0c;也是无意中发现了这个问题&#xff0c;数据库可根据端口来连接 网址:yii666.com< 我用的是sql2014测试的&#xff0c;在安装其他程序是默认安装了sql(sql的tcp/ip端口为xxx)&#xff0c;服务也不相同&#xff0c;但是由于比较不全&#xff0c;我…...

深孔枪钻厂家,科研管理系统思路

序号 名称 参数及技术指标 &#xff08;一&#xff09;系统性能要求 1&#xff0e;系统界面&#xff1a;支持中英文界面自由切换。 2. 系统兼容性&#xff1a;支持主流浏览器&#xff0c;如&#xff1a;IE11 以上、 360 安全浏览器、Firefox、Google Ch…...

【论文阅读笔记】GLM-130B: AN OPEN BILINGUAL PRE-TRAINEDMODEL

Glm-130b:开放式双语预训练模型 摘要 我们介绍了GLM-130B&#xff0c;一个具有1300亿个参数的双语(英语和汉语)预训练语言模型。这是一个至少与GPT-3(达芬奇)一样好的100b规模模型的开源尝试&#xff0c;并揭示了如何成功地对这种规模的模型进行预训练。在这一过程中&#xff0…...

Object常用方法

Object常用方法目录 1. equals(Object obj)&#xff1a; 2. toString()&#xff1a; 3. hashCode()&#xff1a; 4. getClass()&#xff1a; 5. notify() 和 notifyAll()&#xff1a; 6. wait() 和 wait(long timeout)&#xff1a; 7. clone()&#xff1a; 8. fina…...

【VR开发】【Unity】【VRTK】2-关于VR的基础知识

【概述】 在VRTK的实操讲解之前&#xff0c;本篇先介绍几个重要的VR认识。 【VR对各个行业的颠覆】 如果互联网几乎把所有行业都重做了一遍&#xff0c;VR在接下来的几年很可能再把现有的行业都重做一遍&#xff0c;包括但不限于教育&#xff0c;房地产&#xff0c;零售&…...

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)那么这三条语句分别的作用是什么呢&#xff1f; 请参考博文 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(小三) --查找字符数…...

数据分析过程中,发现数值缺失,怎么办?

按照数据缺失机制&#xff0c;数据分析过程中&#xff0c;我们可以将其分为以下几类&#xff1a; &#xff08;1&#xff09;完全随机缺失&#xff08;MCAR&#xff09;&#xff1a;所缺失的数据发生的概率既与已观察到的数据无关&#xff0c;也与未观察到的数据无关。 &#x…...

Vue3.0 toRef toRefs :VCA模式

简介 作用&#xff1a; 创建一个ref对象&#xff0c;其value值指向另一个对象中的某个属性 语法&#xff1a; const name toRef(person, name) 应用&#xff1a; 要将响应式对象中的某个属性单独供应给外部使用时 扩展&#xff1a; toRefs与toRef功能一致&#xff0c;但可…...

VS Code提取扩展时出错。XHR failed

需求&#xff1a;想要在扩展中心下载插件&#xff0c;发现报错 原因&#xff1a;vs code之前设置了代理&#xff0c;需要删除即可...

大模型需要哪类服务器

大模型需要高性能的服务器&#xff0c;以支持大规模的计算和存储需求。一般来说&#xff0c;大模型需要以下类型的服务器&#xff1a; 大型机&#xff1a;大型机可以提供强大的计算能力&#xff0c;适合处理大规模的数据和复杂的计算任务。 GPU服务器&#xff1a;GPU服务器可以…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

链式法则中 复合函数的推导路径 多变量“信息传递路径”

非常好&#xff0c;我们将之前关于偏导数链式法则中不能“约掉”偏导符号的问题&#xff0c;统一使用 二重复合函数&#xff1a; z f ( u ( x , y ) , v ( x , y ) ) \boxed{z f(u(x,y),\ v(x,y))} zf(u(x,y), v(x,y))​ 来全面说明。我们会展示其全微分形式&#xff08;偏导…...

stm32进入Infinite_Loop原因(因为有系统中断函数未自定义实现)

这是系统中断服务程序的默认处理汇编函数&#xff0c;如果我们没有定义实现某个中断函数&#xff0c;那么当stm32产生了该中断时&#xff0c;就会默认跑这里来了&#xff0c;所以我们打开了什么中断&#xff0c;一定要记得实现对应的系统中断函数&#xff0c;否则会进来一直循环…...

【阅读笔记】MemOS: 大语言模型内存增强生成操作系统

核心速览 研究背景 ​​研究问题​​&#xff1a;这篇文章要解决的问题是当前大型语言模型&#xff08;LLMs&#xff09;在处理内存方面的局限性。LLMs虽然在语言感知和生成方面表现出色&#xff0c;但缺乏统一的、结构化的内存架构。现有的方法如检索增强生成&#xff08;RA…...