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

介绍

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

步骤一：引入html2canvas 的js源码

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

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

html部分

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

"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>