html2canvas将页面dom元素内容渲染成图片保存至本地
html2canvas:https://html2canvas.hertzen.com/configuration/
github:https://github.com/niklasvh/html2canvas
效果
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/html2canvas.js"></script>
</head><body><div id="root"><h3>名片</h3><div class="person"><img src="./assets/header.png" alt=""></div></div><button id="downloadImg">点击</button>
</body><script>let dom = document.getElementById("downloadImg");dom.onclick = function () {// 实现保存为图片的第一步：html转为canvashtml2canvas(document.getElementById("root"), {scale: window.devicePixelRatio,height: 800,width: 800,backgroundColor: null//设置背景透明}).then(function (canvas) {let link = document.createElement('a');// 实现保存图片的目标只需要将canvas转image即可。// canvas的toDataURL方法将canvas输出为data: URI类型的图片地址，再将该图片地址赋值给元素的src属性即可。link.href = canvas.toDataURL();// 保存图片link.setAttribute('download', '图片canvas.png');link.style.display = 'none';document.body.appendChild(link);link.click();document.removeChild(link)});}
</script></html>
当图片来源于服务器，需要设置跨域
<body><div id="root"><h3>名片</h3><div class="person"><img style="width: 600px; height: 400px;" src="https://img0.baidu.com/it/u=3976250177,3245140550&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675" alt=""></div></div><button id="downloadImg">点击</button>
</body><script>let dom = document.getElementById("downloadImg");dom.onclick = function () {// 实现保存为图片的第一步：html转为canvashtml2canvas(document.getElementById("root"), {useCORS: true,//图片设置跨域scale: window.devicePixelRatio,height: 800,width: 800,// backgroundColor: null}).then(function (canvas) {let link = document.createElement('a');// 实现保存图片的目标只需要将canvas转image即可。// canvas的toDataURL方法将canvas输出为data: URI类型的图片地址，再将该图片地址赋值给元素的src属性即可。link.href = canvas.toDataURL();// 保存图片link.setAttribute('download', '图片canvas.png');link.style.display = 'none';document.body.appendChild(link);link.click();document.removeChild(link)});}
</script>相关文章：
html2canvas将页面dom元素内容渲染成图片保存至本地
html2canvas:https://html2canvas.hertzen.com/configuration/ github:https://github.com/niklasvh/html2canvas 效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compa…...
前端进阶JS运行原理
JS运行原理 深入了解V8引擎原理 浏览器内核是由两部分组成的，以webkit为例： WebCore：负责HTML解析、布局、渲染等等相关的工作；JavaScriptCore：解析、执行JavaScript代码； 官方对V8引擎的定义࿱…...
Python识别二维码的两种方法（cv2）
在学习Python处理二维码的过程中，我们看到的大多是“用python生成酷炫二维码”、“用Python制作动图二维码”之类的文章。而关于使用Python批量识别二维码的教程，并不多见。所以今天我会给大家分享两种批量识别二维码的Python技巧！pyzbar PI…...
用一个例子告诉你 怎样使用Spark中RDD的算子
目录 1. 前言 1.1 操作分类 1.2 语法知识 2. transformations 2.1 map 2.2 mapPartitions 2.3 flatMap 2.4 glom 2.5 groupBy 2.6 filter 2.7 sample 2.8 distinct 2.9 coalesce 2.10 repartition 2.11 sortBy 2.12 partitionBy 2.13 reduceByKey 2.14 gro…...
什么是跨域? 出现原因及解决方法
目录一、什么是跨域二、为什么有跨域问题？三、解决跨域问题的方案1.Jsonp2.nginx3.CORS3.1 什么是cors3.2 原理四、GateWay网关中实现跨域步骤一、什么是跨域 跨域：浏览器对于javascript的同源策略的限制 。 同源政策的目的，是为了保证用户…...
低代码系统能够解决哪些痛点？
低代码系统能够解决哪些痛点？如果用4句话去归纳，低代码开发可以解决以下问题—— 为企业提供更高的灵活性，用户可以突破代码的限制自主开发业务应用；通过减少对专业软件开发人员的依赖，公司可以快速响应市场上的新业务…...
华为OD机试题，用 Java 解【两数之和绝对值最小】问题
最近更新的博客 华为OD机试题，用 Java 解【停车场车辆统计】问题华为OD机试题，用 Java 解【字符串变换最小字符串】问题华为OD机试题，用 Java 解【计算最大乘积】问题华为OD机试题，用 Java 解【DNA 序列】问题华为OD机试 - 组成最大数（Java） | 机试题算法思路 【2023】使…...
AcWing算法提高课-3.1.1热浪
宣传一下算法提高课整理 <— CSDN个人主页：更好的阅读体验 <— 题目传送门点这里 题目描述 德克萨斯纯朴的民众们这个夏天正在遭受巨大的热浪！！！ 他们的德克萨斯长角牛吃起来不错，可是它们并不是很擅长生产富…...
华为OD机试题【最差产品奖】用 C++ 编码，速通 （2023.Q1）
最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为od机试，独家整理 已参加机试人员的实战技巧文章目录 最近更新的博客使用说明最差产…...
NFT市场大战：Blur市场地位可持续吗？
在战胜无数虚张声势的挑战者之后，OpenSea终于迎来了一个实力雄厚的竞争对手，已威胁到它的市场主导地位。opensea是什么？参考《NFT，区块链的产物之一，了解NFT交易平台Opensea》 继成功的空投之后，Blur并没有…...
初识CSS
1.CSS语法形式CSS基本语法规则就是:选择器若干属性声明由选择器选择一个元素,其中的属性声明就作用于该元素.比如:<body><p>这是一个段落</p><!-- style可以放在代码的任意地方 --><style>p{/* 将字体颜色设置为红色 */color: red;}</style&g…...
kubernetes（k8s）知识总结（第3期）
1. PV 与 PVC PV 是持久卷（Persistent Volume）的首字母缩写。通常情况下，可以事先在 k8s 集群创建 PV 对象： apiVersion: v1 kind: PersistentVolume metadata:name: nfs spec:storageClassName: manualcapacity:storage: 1Giac…...
浅谈跨境电商运行模式
近些年，由于疫情的原因和人们的消费习惯的改变，线下销售越来越不占优势，电商行业由于这几年的飞速发展，成功地吸引到我国的民众，拼多多、淘宝、京东、天猫等各种各样的国内电商平台涌现，依靠着产品质量好、…...
Memcached
什么是MemcachedMemcached 是一个开源免费的高性能的分布式内存对象缓存系统、就是一个软件Memcached的作用缓存数据提高动态网站的速度Memcached的安装//方法一yum installmemcached//方法二1.安装libevent (memcached依赖包)tar -zvxflibevent-release-1.4.15-stable.tar.gzc…...
Unity UGUI 拖拽组件
效果展示 使用方式 拖到图片上即可用 父节点会约束它的活动范围哦~ 父节点会约束它的活动范围哦~ 父节点会约束它的活动范围哦~ 源码 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems;/// <summary> /…...
面试总结——react生命周期
react生命周期总结 生命周期主要分为以下几个阶段： Mounting:创建虚拟DOM，渲染UI(初始化)Updating：更新虚拟DOM，重新渲染UI；(更新)UnMounting：删除虚拟DOM，移除UI；(销毁) 生命周期…...
初探推荐系统-01
文章目录一、什么是推荐系统是什么为什么长尾理论怎么做二、相似度算法杰卡德相似系数余弦相似度三、基于内容的推荐算法如何获取到用户喜欢的物品如何确定物品的特征四、推荐算法实验方法评测指标推荐效果实验方法1、离线实验2、用户调查3、在线实验评测指标1、预测准确度评分…...
html实现浪漫的爱情日记（附源码）
文章目录1.设计来源1.1 主界面1.2 遇见1.3 相熟1.4 相知1.5 相念2.效果和源码2.1 动态效果2.2 源代码2.3 代码结构源码下载更多爱情表白源码作者：xcLeigh 文章地址：https://blog.csdn.net/weixin_43151418/article/details/129264757 html实现浪漫的爱情…...
detectron2容器环境安装问题（1）
1为避免后面出现需求python版本低于3.7的情况ERROR: Package detectron2 requires a different Python: 3.6.9 not in >3.7可以第一步就使用 nvidia/cuda:11.1.1-cudnn8-devel-ubuntu20.04镜像2如果使用了18.04的镜像nvidia/cuda:11.1.1-cudnn8-devel-ubuntu18.04可以使用我…...
JAVA线程池原理详解二
JAVA线程池原理详解二 一. Executor框架 Eexecutor作为灵活且强大的异步执行框架，其支持多种不同类型的任务执行策略，提供了一种标准的方法将任务的提交过程和执行过程解耦开发，基于生产者-消费者模式，其提交任务的线程相当于生…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由：大部分的转换软件需要收费，要么功能不齐全，而开会员又用不了几次浪费钱，借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
MySQL的pymysql操作
本章是MySQL的最后一章，MySQL到此完结，下一站Hadoop！！！ 这章很简单，完整代码在最后，详细讲解之前python课程里面也有，感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...
鸿蒙（HarmonyOS5）实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架，实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...
【安全篇】金刚不坏之身：整合 Spring Security + JWT 实现无状态认证与授权
摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题：安全。文章将详细阐述认证（Authentication) 与授权（Authorization的核心概念，对比传统 Session-Cookie 与现代 JWT（JS…...
鸿蒙HarmonyOS 5军旗小游戏实现指南
1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发，采用DevEco Studio实现，包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...