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作为灵活且强大的异步执行框架，其支持多种不同类型的任务执行策略，提供了一种标准的方法将任务的提交过程和执行过程解耦开发，基于生产者-消费者模式，其提交任务的线程相当于生…...
终极指南：5分钟上手BepInEx，打造你的Unity游戏插件帝国 [特殊字符]
终极指南：5分钟上手BepInEx，打造你的Unity游戏插件帝国 🚀 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx BepInEx是一款专为Unity游戏设计的强…...
EcomGPT-7B模型蒸馏实践：训练更轻量的小模型服务于高并发场景
EcomGPT-7B模型蒸馏实践：训练更轻量的小模型服务于高并发场景 你是不是也遇到过这样的烦恼？手里有一个像EcomGPT-7B这样的大模型，它在电商场景下回答问题、生成文案的效果确实不错，但一到像“双十一”这样的大促节点，…...
AI编程专栏（三） - Cursor 高级技巧与实战优化
1. Cursor高级功能深度解析 第一次接触Cursor时，你可能觉得它就是个带AI的代码编辑器。但当我真正用它完成一个企业级项目后，才发现那些藏在深处的功能才是真正的生产力神器。比如最近在重构一个老旧的React项目时，通过合理使用MCP协议&#…...
lite-avatar形象库使用手册：浏览、选择、集成三步搞定
lite-avatar形象库使用手册：浏览、选择、集成三步搞定 在数字人应用开发中，选择合适的虚拟形象往往是项目启动的第一个挑战。传统方式需要从零开始建模、训练，不仅耗时耗力，结果也难以保证。lite-avatar形象库的出现，…...
ThinkPad X1 Tablet Gen3 vs Gen2键盘对比：为何Gen3更适合改装Type-C？
ThinkPad X1 Tablet Gen3键盘Type-C改装全解析：为何它成为DIY玩家的终极选择？ 在移动办公设备轻量化与模块化设计成为主流的今天，ThinkPad X1 Tablet系列凭借其独特的二合一形态和标志性键盘手感，始终保持着特殊地位。特别是第三代…...
墨语灵犀镜像灰度发布：Kubernetes滚动更新无感升级实践
墨语灵犀镜像灰度发布：Kubernetes滚动更新无感升级实践 1. 引言：优雅升级的艺术挑战 在现代应用部署中，如何实现平滑无感的服务升级一直是个技术难题。特别是对于「墨语灵犀」这样注重用户体验的深度翻译工具，任何服务中断或体验…...
用MNN实现手机端AI绘画：Android Studio集成与模型量化实战
用MNN实现手机端AI绘画：Android Studio集成与模型量化实战 移动端AI应用正在经历爆发式增长，其中AI绘画因其创意性和实用性成为开发者关注的热点。本文将手把手教你如何通过阿里开源的MNN框架，在Android应用中实现高性能的AI绘画功能。不同于…...
零基础玩转OpenClaw：星图Qwen3-32B镜像的10个入门级自动化案例
零基础玩转OpenClaw：星图Qwen3-32B镜像的10个入门级自动化案例 1. 为什么选择OpenClawQwen3-32B组合？ 去年冬天，当我第一次听说OpenClaw这个开源自动化框架时，内心是既兴奋又忐忑的。兴奋的是终于有一个能在本地电脑上实现AI自动…...
2024年TVBOX源接口终极整理：手把手教你如何筛选稳定高速线路
2024年TVBOX源接口高效筛选与优化指南 在流媒体内容消费日益普及的今天，TVBOX作为一款开源播放器解决方案，凭借其强大的扩展性和丰富的资源获取能力，赢得了众多技术爱好者的青睐。然而，面对网络上浩如烟海的源接口资源，…...
IAR平台华大HC32F460工程搭建避坑指南：从零到调试成功的全流程解析
1. 从KEIL到IAR的转型背景 最近两年芯片市场的价格波动，让很多工程师不得不重新评估开发工具链的选择。我作为一个用了五年KEIL的老用户，最近也被迫开始学习IAR平台。原因很简单——当ST单片机价格涨到华大HC32F460的十倍时，任何成本敏感的项…...