【JavaScript】------ 实现HTML背景图片文字导出成图片（html2canvas）-示例代码

短命女 2023-02-09 14:28 113阅读 0赞

> 1. html2canvas.min.js 下载地址: http://www.bootcdn.cn/html2canvas/

> 2.  [modernizr-2.8.3.min.js][] 下载 地址：[http://www.bvbcode.com/cn/l85mxwts-2868363-down][http_www.bvbcode.com_cn_l85mxwts-2868363-down]

> 3,jquery.qrcode.js 下载地址： [http://www.jq22.com/jquery-info294][http_www.jq22.com_jquery-info294]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>html2canvas example</title>
        <style>
            body,div,span{
                margin: 0;
                padding: 0;
            }
            #view{
                width: 900px;
                height: 621px;
                background:url(image.jpg);
                background-size: 100%;
                margin: 0px auto;
            }
            .view-fxdmc{
                height: 173px;
                text-align: center;
                line-height: 305px;
                font-weight: bold;
            }
            .view-aqbm-xm{
                height: 64px;
                line-height: 86px;
            }
           .view-aqbm-xm span{
                margin-left: 270px;
           }
           #qrcode{
                margin-top: 37px;
                width: 297px;
                height: 299px;
                margin-left: 89px;
           }
            .view-orgname{
                margin-left: 556px;
                 margin-top: -36px;
            }
        </style>
    <body>
        <div id="view" >
            <div class="view-fxdmc">
                <span>溶剂回收储罐</span>
            </div>
            <div class="view-aqbm-xm">
                <span>安全部门</span><span>李友冰</span>
            </div>
            <div>
                <div id="qrcode">
                    
                </div>
                <div class="view-orgname"> 徐州易格科技有限公司</div>
            </div>
        </div>
        <a href="#" class="down"  onclick="takeScreenshot()">下载</a>
        <a href="#" class="image"download="liyoubing" ></a>
        
        <script src="html2canvas.js"></script>
        <script src="jquery-3.3.1.min.js"></script>
        <script src="modernizr-2.8.3.js"></script>
        <script src="qrcode.min.js"></script>
      </head>
      <script type="text/javascript">
        //生成图片 下载
        function takeScreenshot(downloadName) {
            $("img").css("margin-top","37px");
            $("img").css("margin-left","89px");
            html2canvas(document.getElementById('view'), {
                onrendered: function(canvas) {
                    var url = canvas.toDataURL();//图片地址
                document.querySelector(".image").setAttribute("download",downloadName);
                    document.querySelector(".image").setAttribute('href', url);
                    $(".image")[0].click();
                }
            });
        }
    
       // 设置 qrcode 参数
       var qrcode = new QRCode('qrcode', {
            text: '',
            width: 297,
            height: 299,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        });
    
      
     //数据
      var datalist=[{
          cname:"溶剂储罐",
          dptname:"安全部门",
          uname:"李**",
          erweima:"qrcode_for_gh_861c8ff444de_430.jpg",
          orgname:"徐州易格科技有限公司"
      },{
          cname:"蒸馏反应釜",
          dptname:"安全部门1",
          uname:"李*冰1",
          erweima:"qrcode_for_gh_861c8ff444de_430.jpg",
          orgname:"徐州易格科技有限公司1"
      },{
          cname:"有机废水处理设施",
          dptname:"安全部门2",
          uname:"李*冰2",
          erweima:"qrcode_for_gh_861c8ff444de_430.jpg",
          orgname:"徐州易格科技有限公司2"
      }]
    
      for(var i=0;i<datalist.length;i++){
            $(".view-fxdmc").find("span").text(datalist[i]["cname"]);
            $(".view-aqbm-xm").find("span:nth-of-type(1)").text(datalist[i]["dptname"]);
            $(".view-aqbm-xm").find("span:nth-of-type(2)").text(datalist[i]["uname"]);
            $(".view-orgname").text(datalist[i]["orgname"]);
            var href=datalist[i]["erweima"];
            qrcode.clear();
            qrcode.makeCode(href);
    
            var downloadName=datalist[i]["cname"];
            takeScreenshot(downloadName);
           
      }
      $("img").css("margin-left","0px");
      </script>
    </body>
    
    </html>

>  2.效果图（根据示例情况 自己修改 维护）
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70][]

[modernizr-2.8.3.min.js]: http://www.bvbcode.com/cn/l85mxwts-2868363
[http_www.bvbcode.com_cn_l85mxwts-2868363-down]: http://www.bvbcode.com/cn/l85mxwts-2868363-down
[http_www.jq22.com_jquery-info294]: http://www.jq22.com/jquery-info294
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200519162004486.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3,size_16,color_FFFFFF,t_70