将html转为图片

最新推荐文章于 2025-05-17 16:04:05 发布

摸爬滚打程序汪

最新推荐文章于 2025-05-17 16:04:05 发布

阅读量453

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb学习记录文章标签： javascript jquery

原文链接：https://blog.csdn.net/u012764444/article/details/83752161

JavaWeb学习记录专栏收录该内容

7 篇文章

订阅专栏

① jquery库（看个人需要）：
②dom-to-image.js: https://github.com/tsayen/dom-to-image
③FileSaver.js：https://github.com/eligrey/FileSaver.js

<html>
<head>
<script type="text/javascript" src="C:/Users/liushuofu/Desktop/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="C:/Users/liushuofu/Desktop/dom-to-image.js"></script>
<script type="text/javascript" src="C:/Users/liushuofu/Desktop/FileSaver.js"></script>

  <script type="text/javascript">
  $(function(){
      //
      $("#btn").click(function(){
      //插入图片到html
      // var node = document.getElementById('table');
      //     domtoimage.toPng(node)
      //               .then(function (dataUrl) {
      //                   console.log(dataUrl)
      //                   var img = new Image();
      //                   img.src = dataUrl;
      //                   document.body.appendChild(img);
      //               });


      // 下载png图片
      domtoimage.toBlob(document.getElementById('table'))
          .then(function (blob) {
              console.log(blob)
              window.saveAs(blob, 'my-node.png');
          });


      // 下载jpeg图片
      // domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
      //           .then(function (dataUrl) {
      //               var link = document.createElement('a');
      //               link.download = 'my-image-name.jpeg';
      //               link.href = dataUrl;
      //               link.click();
      //           });  

      // var node = document.getElementById('table');
      // domtoimage.toPixelData(node)
      //     .then(function (pixels) {
      //         for (var y = 0; y < node.scrollHeight; ++y) {
      //           for (var x = 0; x < node.scrollWidth; ++x) {
      //             pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
      //             /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
      //             pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
      //           }
      //         }
      //     });    
  })
  })
  </script>
</head>
<body>
  <input type="button" id="btn" value="do it" />
  <h4>两行三列：</h4>
  <table id="table" border="1" style="width:200px;border-collapse: collapse;border:1px solid black;">
      <tr style="background:green;">
        <td rowspan="3">200</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr style="background:green;">
        <td rowspan="2">500</td>
        <td>600</td>
      </tr>
      <tr style="background:green;">
        <td>600</td>
      </tr>
      <tr style="background:skyblue;">
        <td rowspan="3">100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr style="background:skyblue;">
        <td>500</td>
        <td>600</td>
      </tr>
      <tr style="background:skyblue;">
        <td>600</td>
        <td>600</td>
      </tr>
  </table>
</body>
</html>

另一种写法引入html2canvas.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>htmltopic</title>
    <script type="text/javascript" src="/h5/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/html2canvas.min.js"></script>
    <style>
        * {
            margin: 0;
        }
 
 
        .test {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #87CEEB;
            display: inline-block;
            vertical-align: top;
        }
 
 
        canvas {
            margin-right: 5px;
        }
 
 
        .down {
            float: left;
            margin: 40px 10px;
        }
        .down2 {
            float: left;
            margin: 40px 30px;
        }
    </style>
</head>
<body>
 
 
    <div class="test">测试</div>
<div><a class="down" href="" download="downImg">下载</a>
</div>
    <div><a class="down2" href="" download="downImg">下载2</a></div>
<script>
    //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
    //html2canvas(document.querySelector('div')).then(function(canvas) {
    //    document.body.appendChild(canvas);
    //});
    //创建一个新的canvas
    var canvas2 = document.createElement("canvas");
    let
    _canvas = document.querySelector('div');
    var w = parseInt(window.getComputedStyle(_canvas).width);
    var h = parseInt(window.getComputedStyle(_canvas).height);
    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
    canvas2.width = w * 2;
    canvas2.height = h * 2;
    canvas2.style.width = w + "px";
    canvas2.style.height = h + "px";
    //可以按照自己的需求，对context的参数修改,translate指的是偏移量
    //  var context = canvas.getContext("2d");
    //  context.translate(0,0);
    var context = canvas2.getContext("2d");
    context.scale(2, 2);
    html2canvas(document.querySelector('div'), { canvas: canvas2 }).then(function(canvas) {
        //document.body.appendChild(canvas);
        //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
        document.querySelector(".down").setAttribute('href', canvas.toDataURL());
    });
</script>
 
 
<script language="javascript">
    //这是另一种写法
    $(function () {
        $(".down2").click(function () {
            html2canvas($(".test")).then(function (canvas) {
                var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
                window.location.href = imgUri; // 下载图片
            });
 
 
            //html2canvas($('.tongxingzheng_bg'), {
            //    onrendered: function (canvas) {
            //        var data = canvas.toDataURL("image/png");//生成的格式
            //        //data就是生成的base64码啦
            //        alert(data);
            //    }
            //});
        });
    });
</script>
</body>
</html>