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

介绍

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

步骤一:引入html2canvas 的js源码

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

javascript 复制代码
<script src="./hiprint/plugins/jspdf/html2canvas.min.js"></script>

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

html部分

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

javascript 复制代码
<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>
javascript 复制代码
<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、获取到每个子元素的dom
             var 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的文档哟!

相关推荐
訾博ZiBo28 分钟前
【Vibe Coding】001-前端界面常用布局
前端
软件技术NINI28 分钟前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
IT_陈寒31 分钟前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
歪歪10041 分钟前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手43 分钟前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
ZYMFZ1 小时前
python面向对象
前端·数据库·python
长空任鸟飞_阿康1 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
lapiii3581 小时前
快速学完React计划(第一天)
前端·react.js·前端框架
苏打水com1 小时前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html