【JavaScript】------ 实现HTML背景图片文字导出生成图片(html2canvas)

皮皮冰要做大神

已于 2022-02-16 13:30:32 修改

阅读量1k

点赞数 1

分类专栏： # HTML5 # JavaScript # Jquery 文章标签： html5 javascript jquery html2canvas 图片

于 2020-05-19 16:24:26 首次发布

本文链接：https://blog.csdn.net/qq_38366657/article/details/106216947

版权

JavaScript 同时被 3 个专栏收录

59 篇文章 2 订阅

订阅专栏

HTML5

16 篇文章 0 订阅

订阅专栏

Jquery

16 篇文章 0 订阅

订阅专栏

1. html2canvas.min.js 下载地址:

http://www.bootcdn.cn/html2canvas/

2. modernizr-2.8.3.min.js 下载地址：http://www.bvbcode.com/cn/l85mxwts-2868363-downhttp://www.bvbcode.com/cn/l85mxwts-2868363-down

3,jquery.qrcode.js 下载地址： jquery二维码生成插件jquery.qrcode.js

HTML背景图片文字导出生成图片.zip_html图片文字混合排版-互联网文档类资源-CSDN下载1.资源内容：实现HTML（背景图片文字）导出图片并下载，代码简单可以自己修改进行完善自己的需求。html图片文字混合排版更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qq_38366657/12438912

<!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">
                <!-- <img src="qrcode_for_gh_861c8ff444de_430.jpg" id="qrcode" width="200px" height="200px"> -->
            </div>
            <div class="view-orgname"> 徐州易格科技有限公司</div>
        </div>
    </div>
    <a href="#" class="down"  onclick="takeScreenshot()">下载</a>
    <a href="#" class="image"download="liyoubing" ></a>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script> -->
    <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.效果图（根据示例情况自己修改维护）

皮皮冰要做大神

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
【JavaScript】------ 实现HTML背景图片文字导出生成图片(html2canvas)

1.html2canvas.min.js 下载地址: http://www.bootcdn.cn/html2canvas/2.modernizr-2.8.3.min.js下载地址：http://www.bvbcode.com/cn/l85mxwts-2868363-down3,jquery.qrcode.js 下载地址：http://www.jq22.com/jquery-info294<!DOCTYPE html><html><h...
复制链接

扫一扫