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

介绍

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

HTML5使用html2canvas转化为图片,然后再转为base64._第1张图片

步骤一:引入html2canvas 的js源码

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

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

html部分

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

div内容
div内容

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

你可能感兴趣的:(html5,前端,html)