HTML5使用html2canvas转化为图片,然后再转为base64.

介绍

场景:今天同事提了个协助,将HTML5文件中的元素转为图片,并且最终转为base64格式传给后端。感觉还挺有意思就记录下。(试例如下)

步骤一:引入html2canvas 的js源码

html2canvas.min.js 下载地址  https://files.cnblogs.com/files/lyt520/html2canvas.min.js

<script src="./hiprint/plugins/jspdf/html2canvas.min.js"></script>

步骤二:遍历元素并使用html2canvas对html进行图片生成。最后将图片转为base64格式

html部分

(这个例子有一个特殊的地方,就是它会显示多个二维码标签。所有我这边使用 DOM来获取下父元素,然后再获取到底下的子元素。遍历下,一个一个转化为图片。代码如下,有不理解的可以留言讨论)

<div style="display: block" class="canvasBox"><div class="hiprint-printPanel panel-index-0" id="canvasImg" ><div class="hiprint-printPaper" original-height="45" style="width: 120mm; height: 44mm;"><div class="hiprint-printPaper-content" >div内容</div></div></div><div class="hiprint-printPanel panel-index-0" id="canvasImg" ><div class="hiprint-printPaper" original-height="45" style="width: 120mm; height: 44mm;"><div class="hiprint-printPaper-content" >div内容</div></div></div></div>
<script>window.onload=function(){//1、获取下父元素var oTd=document.querySelector('.canvasBox');               //2、遍历父元素下的子元素 oTd.children即可得到子元素for(var i=0;i<oTd.children.length;i++){//3、每个子元素中,我加上不同的class类名  所以`canvasImg${i}`oTd.children[i].className = `canvasImg${i}`;//4、获取到每个子元素的domvar domNode = document.querySelector(`.canvasImg${i}`);//5、使用html2canvas 并且配置html2canvas(domNode,{width: Math.floor(domNode.clientWidth), //宽height: Math.floor(domNode.clientHeight), //高scale: 0.7,  //设置像素比useCORS: true,allowTaint:false,}).then(function(canvas) {document.body.appendChild(canvas);var img = document.createElement('img');//6、获取图片路径 并且转base64格式img.src = canvas.toDataURL('image/jpeg');console.log(img.src,"路径");var dataURL=img.src.replace(/^data:image\/(png|jpg|jpeg);base64,/, "")console.log(dataURL,'base64格式');img.setAttribute('id', 'canvasImg');// 将img展示到页面上// prependChild(img, domNode);});}}
</script>

html2canvas中的配置项不清楚的话,推荐可以看下html2canvas的文档哟!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/130926.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【FreeRTOS】【STM32】02 FreeRTOS 移植

基于 [野火]《FreeRTOS%20内核实现与应用开发实战—基于STM32》 正点原子《STM32F429FreeRTOS开发手册_V1.2》 准备 基础工程&#xff0c;例如点灯 FreeRTOS 系统源码 FreeRTOS 移植 上一章节已经说明了Free RTOS的源码文件在移植时所需要的&#xff0c;FreeRTOS 为我们提供…

win11右键菜单显示更多的设置方法

用了一年多win11系统了&#xff0c;Win11最大的变化之一莫过于右键菜单发生了变化。右键菜单很多时候需要点两次&#xff0c;实在是反人类&#xff0c;太麻烦了。 必须使用“显示更多选项”的右键菜单。 今天分享一个使用命令行更改右键菜单显示更多的设置方法&#xff1a; …

【Mybatis】动态 SQL

动态 SQL \<if>标签\<trim>标签\<where>标签\<set>标签\<foreach>标签 动态 sql 是 Mybatis 的强⼤特性之⼀&#xff0c;能够完成不同条件下不同的 sql 拼接。 <if>标签 前端用户输入时有些选项是非必填的, 那么此时传到后端的参数是不确…

Tabby All configured authentication methods failed

文章目录 重要序言错误原因tabby的连接设置 总结 重要序言 Tabby是一款美观耐用的软件&#xff0c;平常一直用来输入密码方法SSH公司服务器&#xff0c;后来为了另外一台服务器加了SSH私钥&#xff0c;之后Tabby SSH连接死活不成功&#xff0c;哎&#xff0c;折腾了好久&#…

微服务09-Sentinel的入门

文章目录 微服务中的雪崩现象解决办法&#xff1a;1. 超时处理2. 舱壁模式3. 熔断降级4.流量控制 Sentinel1.介绍2.使用操作3.限流规则4.实战&#xff1a;流量监控5.高级选项功能的使用1.关联模式2.链路模式3.总结 流控效果1.预热模式2.排队等待模式3.总结4.热点参数限流5.实战…

【eNSP】VLAN基础配置

一、基于接口划分VLAN&#xff08;Access接口和Trunk接口&#xff09; 1、创建VLAN LSW1 [LSW1]vlan batch 10 20 Info: This operation may take a few seconds. Please wait for a moment...done.LSW2 [LSW2]vlan batch 10 20 Info: This operation may take a few second…

K8S存储总结持久化存储解决方案(以NFS为例)

目录 K8S存储 一、emptydir 1. emptydir是什么 2. emptydir例子 二、hostpath hostpath 是什么 hostpath 例子 弊端 三、持久化存储 1.Persistent Volume(PV) 2.Persistent Volume Claim(PVC) 3.PV/PVC结合NFS使用实践&#xff08;持久存储&#xff09; 1. NFS服务…

Linux编译FFmpeg

Linux编译FFmpeg 1. 下载FFmpeg源码 FFmpeg源码下载地址&#xff1a;http://ffmpeg.org/download.html 在下面选择版本 2. 解压并创建生成目录 tar xvf ffmpeg-snapshot.tar.bz2 // 解压下载的FFmpeg源码 makedir /root/ffmpeg // 创建生成目录3. 编译FFmpeg 进入FF…

Flink---10、处理函数(基本处理函数、按键分区处理函数、窗口处理函数、应用案例TopN、侧输出流)

星光下的赶路人star的个人主页 我的敌手就是我自己&#xff0c;我要他美好到能使我满意的程度 文章目录 1、处理函数1.1 基本处理函数&#xff08;ProcessFunction&#xff09;1.1.1 处理函数的功能和使用1.1.2 ProcessFunction解析1.1.3 处理函数的分类 1.2 按键分区处理函数&…

软件测试工具有什么作用?有哪些好用的测试工具推荐?

软件测试工具是现代软件测试中不可或缺的重要组成部分&#xff0c;指的是一系列在软件开发过程中使用的工具&#xff0c;用于帮助测试人员进行测试活动&#xff0c;提高测试效率&#xff0c;减少测试成本。选择并使用合适的软件测试工具&#xff0c;可提高软件质量和效率。 一…

【docker】Docker--harbor私有仓库部署与管理——重点

一、理论 1、本地私有仓库 只能在当前机器上做 #首先下载 registry 镜像 docker pull registry #在 daemon.json 文件中添加私有镜像仓库地址 vim /etc/docker/daemon.json { "insecure-registries": ["192.168.10.23:5000"], …

数学建模——确定性时间序列分析方法

介绍 将预测对象按照时间顺序排成一组序列&#xff0c;称为时间序列。从时间序列过去的变化规律&#xff0c;推断今后变化的可能性及变化趋势、变化规律&#xff0c;这就是时间序列预测法。 时间序列模型&#xff0c;其实也是一种回归模型。其基本原理是&#xff0c;一方面承认…