当前位置: 首页 > 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 数据…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

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

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...