使用html2canvas将页面保存成图片

最新推荐文章于 2024-03-28 16:40:03 发布

bown95

最新推荐文章于 2024-03-28 16:40:03 发布

阅读量473

点赞数 1

本文链接：https://blog.csdn.net/g_1227/article/details/103538507

版权

使用html2canvas将页面保存成图片

将整个页面转成画布
代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
  </head>
  <body style="margin:0px">
    <div id="capture" style="padding: 10px; background: #f5da55; width: 200px;">
      <h4 style="color: #000; ">欢迎访问 hangge.com</h4>
    </div>
    <button type="button" name="button" onclick="convert()">开始生成</button>
    <br>
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script type="text/javascript">
      //开始转换
      function convert() {
        html2canvas(document.body).then(canvas => {
          document.body.appendChild(canvas)
        });
      }
    </script>
  </body>
</html>

将指定DOM元素转成Canvas

html2canvas(document.querySelector("#capture")).then(canvas => {
  document.body.appendChild(canvas)
});

将Canvas转换成base64形式
（1）上面的样例生成画布后，便直接显示在页面上进行预览。我们也可以将生成的画布转成base64形式提交到后台，或者作为元素的src属性来显示。

html2canvas(document.querySelector("#capture")).then(canvas => {
  var imgUrl = canvas.toDataURL("image/png"); // 将canvas转换成img的src流
  console.log("base64编码数据：", imgUrl);
});

（2）转换时可以设置截图质量（0〜1）

html2canvas(document.querySelector("#capture")).then(canvas => {
  var imgUrl = canvas.toDataURL("image/png", 1); // 此方法可以设置截图质量（0-1）
  console.log("base64编码数据：", imgUrl);
});

设置生成的Canvas的高度和宽度

html2canvas(document.querySelector("#capture"),{
  width: 75,
  height: 75
}).then(canvas => {
  document.body.appendChild(canvas)
});

设置Canvas的背景色

（1）使用backgroundColor这个属性可以设置canvas的背景色：

默认值为白色（#FFFFFF）
如果想要背景透明，可以将其设为null

（2）将背景色改成绿色

html2canvas(document.querySelector("#capture"),{
  width: 240,
  height: 120,
  backgroundColor: "#00ff00"
}).then(canvas => {
  document.body.appendChild(canvas)
});

设置放大倍数
（1）使用规模属性可以修改渲染时的放大倍数（至少为1），将其调大可以解决低分辨率设备下生成的图片模糊问题。
（2）下面是当scale设置为2时

html2canvas(document.querySelector("#capture"),{
  scale: 2
}).then(canvas => {
  document.body.appendChild(canvas)
});

指定渲染

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
  </head>
  <body style="margin:0px">
    <div id="capture" style="padding: 10px; background: #f5da55; width: 200px;">
      <h4 style="color: #000; ">欢迎访问 hangge.com</h4>
    </div>
    <button type="button" name="button" onclick="convert()">开始生成</button>
    <br>
    <canvas id="myCanvas" width="220" height="84"></canvas>
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script type="text/javascript">
      //开始转换
      function convert() {
        html2canvas(document.querySelector("#capture"),{
          canvas: document.querySelector("#myCanvas")
        }).then(canvas => {
 
        });
      }
    </script>
  </body>
</html>

附：自动保存为图片并下载

（1）上面的样例如果要将DOM元素转换为图片保存下来，都是先将其转成画布，然后再手动在画布上单击鼠标右键，通过“另存为”功能下载到本地。
（2）如果想要实现图片自动生成，自动下载的话可以替换FileSaver.js这个第三方库。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
  </head>
  <body style="margin:0px">
    <div id="capture" style="padding: 10px; background: #f5da55; width: 200px;">
      <h4 style="color: #000; ">欢迎访问 hangge.com</h4>
    </div>
    <button type="button" name="button" onclick="convert()">开始生成</button>
    <br>
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script type="text/javascript" src="js/FileSaver.js"></script>
    <script type="text/javascript">
      //开始转换
      function convert() {
        html2canvas(document.querySelector("#capture")).then(canvas => {
          //将canvas内容保存为文件并下载
          canvas.toBlob(function(blob) {
             saveAs(blob, "hangge.png");
          });
        });
      }
    </script>
  </body>
</html>

FileSaver.js

保存文本文件
下面代码在浏览器打开后会自动生成文件并导出：

  <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="FileSaver.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      var blob = new Blob(["欢迎访问 hangge.com"], {type: "text/plain;charset=utf-8"});
      saveAs(blob, "文件导出测试.txt");
    </script>
  </head>
  <body>
  </body>
</html>

下面是另一种写法，实现的效果和上面的是一样的。

var file = new File(["欢迎访问 hangge.com"], "文件导出测试.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);

保存图片
下面代码会在页面上的 Canvas 中绘制一个矩形，并将其自动导出成图片：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="FileSaver.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      function onload() {
        //在canvas上绘制矩形
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.fillStyle = "blue"; //填充颜色
        context.fillRect(50,50,200,100); 绘制实心矩形
 
        //将canvas内容保存为文件并下载
        canvas.toBlob(function(blob) {
            saveAs(blob, "hangge.png");
        });
      }
    </script>
  </head>
  <body onload="onload()">
    <canvas id="myCanvas" width="400" height="200">
  </body>
</html>

访问页面后可以看到浏览器会自动下载文件

bown95

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用html2canvas将页面保存成图片

使用html2canvas将页面保存成图片将整个页面转成画布代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> </head> <body style="margin...
复制链接

扫一扫