Skip to main content

canvas

🤔 区域截图​

Canvas 的 API 可以实现 div 内所呈现的样式截图保存本地； Canvas API 如下： canvas API 中文网 <canvas></canvas>虽然是 HTML5 标签，但使用 JavaScript 还需引入： https://cdn.staticfile.org/html2canvas/1.2.1/html2canvas.min.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Canvas</title>
    <script type="text/javascript" src="js/html2canvas.min.js"></script>
    <style>
      * {
        margin: 0;
      }
      /* 全局引入字体 */
      @font-face {
        font-family: myFirstFont;
        src: url("./LingWaiSC-Medium.otf");
      }
      .test {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background-color: #87ceeb;
        display: inline-block;
        vertical-align: top;
      }
      .test h2,
      p {
        font-family: myFirstFont;
      }
    </style>
  </head>

  <body>
    <div class="test">
      <img src="" alt="" />
      <h2>TO：XXXX</h2>
      <p>欢迎来到canvas</p>
      <h2>Form：XXXX</h2>
    </div>
    <a class="down" href="" download="downImg">下载</a>
    <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>
  </body>
</html>