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

前端使用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…...

道可云元宇宙每日资讯|第十二届互联网安全大会在北京开幕

道可云元宇宙每日简报&#xff08;2024年8月2日&#xff09;讯&#xff0c;今日元宇宙新鲜事有&#xff1a; 第十二届互联网安全大会在北京开幕 7月31日&#xff0c;第十二届互联网安全大会&#xff08;ISC.AI 2024&#xff09;在北京国家会议中心盛大开幕。 本届大会以“打造…...

前端面试基础题(微信公众号:前端面试成长之路)

BFC、IFC、GFC、FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。 到底什么是BFC、IFC、GFC和FFC Whats FC&#xff1f; 一定不是KFC&#xff0c;FC的全称是&#xff1a;Formatting Contexts&#xff0c;是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域&#xff0c;并…...

https执行过程,特点,作用

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

【优秀python案例】基于Python的豆瓣电影TOP250爬虫与可视化设计与实现

摘要&#xff1a;伴随着当代社会物质水平的不断提高&#xff0c;人们越来越注重精神享受&#xff0c;看电影成为人们日常生活中重要的组成成分。本文将针对豆瓣上热门电影评论进行爬取&#xff0c;应用可视化分析更为形象地了解该电影的动态。该系统可以使得人们实时了解到有关…...

如何设计一个测试用例

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

黄金和原油市场波动背后的经济信号

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

【Python数值分析】革命:引领【数学建模】新时代的插值与拟合前沿技术

目录 ​编辑 第一部分&#xff1a;插值的基本原理及应用 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&#xff0c;即局部凸约束补丁的意思。LCCP方法的基本思想是在图像中找到局部区域内的凸结构&#xff0c;并将这些结构用于分割图像或提取特征。这种…...

git 推送时出现错误 Locking support detected on remote “origin“

背景&#xff1a;代码托管是局域网搭建的gitlab 按照提示配置 lfs.locksverify true 还是没有用。 网上搜索了一番&#xff0c;其中有人提到可能时服务器磁盘满了&#xff0c;连到服务器上 df -h 查看&#xff0c; 发现根目录已经写满了&#xff1a; 使用命令行&#xff1a; d…...

劳动仲裁经验篇【赶紧收藏】

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

QT多媒体编程(一)——音频编程知识详解及MP3音频播放器Demo

目录 引言 一、QtMultimedia模块简介 主要类和功能 二、QtMultimedia相关类及函数解析 QAudioInput QAudioOutput QAudioFormat QMediaPlayer QMediaPlaylist QCamera 三、音频项目实战Demo UI界面 核心代码 运行结果 四、结论 引言 在数字时代&#xff0c;音频…...

MySQL使用教程 最最最实用的零基础教程 直接从安装开始教!!!!

数据构成了我们日益数字化的社会基础。想象一下&#xff0c;从移动应用和银行系统到搜索引擎&#xff0c;再到如 ChatGPT 这样的先进人工智能聊天机器人&#xff0c;这些工具若没有数据支撑&#xff0c;将寸步难行。你有没有好奇过这些海量数据都存放在哪里呢&#xff1f;答案正…...

pycharm怎么使用Anaconda和配置

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

android中打包apk体积优化方案

1.在配置文件AndroidManifest中新增 android:extractNativeLibs"true" 2.在模块build文件下配置支持的cpu,一般配置64的就行了,多配一种so库体积大一倍&#xff0c;择优。 ndk { abiFilters arm64-v8a } 3.在模块builde文件下配置混淆除去无用的资源文件 注:三种…...

Kubernetes常见的3种部署方式

Kubernetes常见的3种部署方式 1. kubeadm2. 二进制包安装3. Minikube💖The Begin💖点点关注,收藏不迷路💖 Kubernetes(K8s)作为容器编排领域的领导者,提供了多种部署方式以适应不同场景的需求。 1. kubeadm 简介:Kubernetes官方推荐的集群部署工具。特点:简单易用…...

什么情况?我代码没了

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

关于Unity四种合批技术详解

文章目录 一.静态合批(StaticBatching)1.启用静态合批2.举例说明3.静态合批的限制4.静态合批的优点缺点5.动态指定物品合批 二.动态合批(Dynamic Batching)1.启用动态合批2.合批规则3.举例说明4.使用限制 三.GPU Instancing1.启用GPU Instancing2.启用限制3.举例说明 四.SRP Ba…...

自定义注解+拦截器+redis限流

逻辑&#xff1a;写一个注解&#xff0c;自定义在多少秒内限制访问多少次。 自定义拦截器&#xff0c;对于加了注解的请求&#xff0c;在执行方法前。先检查有没有注解&#xff0c;如果有注解就将请求的ipurl拼接作为key。 查询redis中有没有该key&#xff0c;没有就存入&…...

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 数据…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...