前端使用html2canvas在页面截图并导出,以及截图中含有图片时的跨域问题解决
1.引入html2canvas
npm 安装或cdn引入
npm install html2canvas <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
2.使用 html2canvas
// 假设你有一个 id 为 "capture" 的元素
html2canvas(document.querySelector("#capture")).then(canvas => { // canvas 是转换后的 canvas 元素 // 你可以将 canvas 转换为图片,然后添加到 DOM 中 document.body.appendChild(canvas); // 或者,将 canvas 转换为图片 URL 并显示在 img 元素中 var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); var link = document.createElement('a'); link.download = 'screenshot.png'; link.href = image; link.click();
});
3.图片跨域时的解决方法
1.服务器CORS配置:
图片所在服务器设置Access-Control-Allow-Origin: *
或 Access-Control-Allow-Origin: 你的域名
的头部。
注意,出于安全考虑,许多服务器默认不允许跨域请求。
2.设置开发服务器代理,以vue项目为例:
在vue.config.js中配置
// vue.config.js
module.exports = { devServer: { proxy: { '/file': { target: 'http://155.60.114.72:88545'//图片所在地址, changeOrigin: true, pathRewrite: { '^/file': '' } } } }
}
在你的Vue组件中,你应该将图片URL更改为通过代理访问的URL
let img = '/file/7df46603b38d49af94cefb4c92d5cd27.jpg'
相关文章:
前端使用html2canvas在页面截图并导出,以及截图中含有图片时的跨域问题解决
1.引入html2canvas npm 安装或cdn引入 npm install html2canvas <script src"https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> 2.使用 html2canvas // 假设你有一个 id 为 "capture" 的元素 h…...
道可云元宇宙每日资讯|第十二届互联网安全大会在北京开幕
道可云元宇宙每日简报(2024年8月2日)讯,今日元宇宙新鲜事有: 第十二届互联网安全大会在北京开幕 7月31日,第十二届互联网安全大会(ISC.AI 2024)在北京国家会议中心盛大开幕。 本届大会以“打造…...

前端面试基础题(微信公众号:前端面试成长之路)
BFC、IFC、GFC、FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。 到底什么是BFC、IFC、GFC和FFC Whats FC? 一定不是KFC,FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并…...

https执行过程,特点,作用
还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,ech…...

【优秀python案例】基于Python的豆瓣电影TOP250爬虫与可视化设计与实现
摘要:伴随着当代社会物质水平的不断提高,人们越来越注重精神享受,看电影成为人们日常生活中重要的组成成分。本文将针对豆瓣上热门电影评论进行爬取,应用可视化分析更为形象地了解该电影的动态。该系统可以使得人们实时了解到有关…...

如何设计一个测试用例
前言👀~ 上一章我们介绍了什么是软件测试以及软件测试的一些基础概念,今天来聊聊如何设计一个测试用例,涉及到黑盒测试的测试方法 基于需求进行测试用例的设计 基于需求的具体设计方法 等价类 边界值 判定表法 正交表法 场景设计法 …...

黄金和原油市场波动背后的经济信号
黄金市场的波动与经济数据影响 周四,黄金市场经历了一天内的剧烈波动,从早盘的高点到纽约时段的急剧下跌。现货黄金价格最初上涨至2462.29美元/盎司,但随后迅速跌至最低的2434.72美元/盎司。最终,黄金收盘价报2445.84美元/盎司&am…...

【Python数值分析】革命:引领【数学建模】新时代的插值与拟合前沿技术
目录 编辑 第一部分:插值的基本原理及应用 1. 插值的基本原理 1.1 插值多项式 1.2 拉格朗日插值 1.3 牛顿插值 1.4 样条插值 2. 插值的Python实现 2.1 使用 NumPy 进行插值 2.2 使用 SciPy 进行插值 2.2.1 一维插值 编辑 2.2.2 二维插值 3. 插值…...

PCL-基于超体聚类的LCCP点云分割
目录 一、LCCP方法二、代码实现三、实验结果四、总结五、相关链接 一、LCCP方法 LCCP指的是Local Convexity-Constrained Patch,即局部凸约束补丁的意思。LCCP方法的基本思想是在图像中找到局部区域内的凸结构,并将这些结构用于分割图像或提取特征。这种…...

git 推送时出现错误 Locking support detected on remote “origin“
背景:代码托管是局域网搭建的gitlab 按照提示配置 lfs.locksverify true 还是没有用。 网上搜索了一番,其中有人提到可能时服务器磁盘满了,连到服务器上 df -h 查看, 发现根目录已经写满了: 使用命令行: d…...

劳动仲裁经验篇【赶紧收藏】
【劳动仲裁】纯经验干货分享,点个关注防止需要时找不到! 当公司决定搞你心态,变相逼退你时,无非就那么些手段,只要你能正确应对,并做好收集证据的准备,就不住畏惧。合理利用法律的武器维护自身…...

QT多媒体编程(一)——音频编程知识详解及MP3音频播放器Demo
目录 引言 一、QtMultimedia模块简介 主要类和功能 二、QtMultimedia相关类及函数解析 QAudioInput QAudioOutput QAudioFormat QMediaPlayer QMediaPlaylist QCamera 三、音频项目实战Demo UI界面 核心代码 运行结果 四、结论 引言 在数字时代,音频…...

MySQL使用教程 最最最实用的零基础教程 直接从安装开始教!!!!
数据构成了我们日益数字化的社会基础。想象一下,从移动应用和银行系统到搜索引擎,再到如 ChatGPT 这样的先进人工智能聊天机器人,这些工具若没有数据支撑,将寸步难行。你有没有好奇过这些海量数据都存放在哪里呢?答案正…...

pycharm怎么使用Anaconda和配置
打开Anaconda Prompt 要删除 Conda 环境 yolov5sconda,你可以使用以下命令: conda remove --name yolov5sconda --all这个命令会删除名为 yolov5sconda 的整个环境,包括其中安装的所有包和依赖项。请在命令提示符或终端中运行此命令。执行此…...

android中打包apk体积优化方案
1.在配置文件AndroidManifest中新增 android:extractNativeLibs"true" 2.在模块build文件下配置支持的cpu,一般配置64的就行了,多配一种so库体积大一倍,择优。 ndk { abiFilters arm64-v8a } 3.在模块builde文件下配置混淆除去无用的资源文件 注:三种…...
Kubernetes常见的3种部署方式
Kubernetes常见的3种部署方式 1. kubeadm2. 二进制包安装3. Minikube💖The Begin💖点点关注,收藏不迷路💖 Kubernetes(K8s)作为容器编排领域的领导者,提供了多种部署方式以适应不同场景的需求。 1. kubeadm 简介:Kubernetes官方推荐的集群部署工具。特点:简单易用…...

什么情况?我代码没了
前两天检视代码时,发现PR里面有两个提交的描述信息一模一样,于是我提出应该将这两个提交合并成一个,保持提交树的清晰。 1 先储存起来! 而同事这时正在开发别的特性,工作区不是干净的,没法直接执行 git r…...

关于Unity四种合批技术详解
文章目录 一.静态合批(StaticBatching)1.启用静态合批2.举例说明3.静态合批的限制4.静态合批的优点缺点5.动态指定物品合批 二.动态合批(Dynamic Batching)1.启用动态合批2.合批规则3.举例说明4.使用限制 三.GPU Instancing1.启用GPU Instancing2.启用限制3.举例说明 四.SRP Ba…...
自定义注解+拦截器+redis限流
逻辑:写一个注解,自定义在多少秒内限制访问多少次。 自定义拦截器,对于加了注解的请求,在执行方法前。先检查有没有注解,如果有注解就将请求的ipurl拼接作为key。 查询redis中有没有该key,没有就存入&…...

Springcloud物流配送后台-计算机毕业设计源码69809
目 录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2 物流配送后台系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 操作可行性分析 2.2 系统流程分析 2.2.1数据增加流程 2.2.2 数据修改流程 2.2.3 数据…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...

ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...

【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...

计算机基础知识解析:从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域:无处不在的数字助手 2、 计算机的进化史:从算盘到量子计算 3、计算机的分类:不止 “台式机和笔记本” 4、计算机的组件:硬件与软件的协同 4.1 硬件:五大核心部件 4.2 软件&#…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架:基于 (一个现代化的 React 节点绘图库) 功能: 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构: 传统SMO中LPF会带来相位延迟和幅值衰减,并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF),可以去除高次谐波,并且不用相位补偿就可以获得一个误差较小的转子位…...