背景介绍：工作中需要用到这个库，实现一个页面自定义的业务需求。由于对于这个库 html2canvas 还不太熟悉，便单独建了一个简单的 vue 工程，写一个简单的 demo，熟悉一下该库的用法……

demo 最终效果演示：
demo.gif

参考资料

源码

  1. <template>
  2.   <div id="app">
  3.     <div ref="test-container" class="container">
  4.       <div class="box" style="background: red">A</div>
  5.       <div class="box" style="background: green">B</div>
  6.       <div class="box" style="background: blue">C</div>
  7.       <div class="box" style="background: orange">D</div>
  8.     </div>
  9.     <div class="img-container">
  10.       <span class="icon" @click="createNewCanvas(index - 1)">←</span>
  11.       <img :src="screenShotSrc" alt="" class="test-img" />
  12.       <span class="icon" @click="createNewCanvas(index + 1)">→</span>
  13.     </div>
  14.   </div>
  15. </template>
  17. <script>
  18. import html2canvas from "html2canvas";
  19. export default {
  20.   name: "App",
  21.   data() {
  22.     return {
  23.       screenShotSrc: "",
  24.       index: 0,
  25.       isCreating: false,
  26.       duration: 3000,
  27.       timer: null,
  28.     };
  29.   },
  30.   mounted() {
  31.     this.createNewCanvas();
  32.     this.timer = setTimeout(() => {
  33.       this.createNewCanvas(this.index + 1);
  34.     }, this.duration); // 开启 - 自动轮播
  35.   },
  36.   methods: {
  37.     // 产生一张截图
  38.     async createNewCanvas(index = 0) {
  39.       if (this.isCreating) return; // 上一张截图还没创建完毕
  41.       console.log("暂停");
  42.       clearTimeout(this.timer); // 暂停 - 自动轮播
  44.       this.isCreating = true;
  45.       this.index = (index + 4) % 4;
  47.       const canvas = await html2canvas(this.$refs["test-container"], {
  48.         // 截图区域
  49.         x: this.index * 100,
  50.         y: 0,
  51.         width: 100,
  52.         height: 100,
  54.         // 跨域问题
  55.         allowTaint: false,
  56.         useCORS: true,
  58.         // 解决 - 截图模糊问题
  59.         // dpi: 300,
  60.         // scale: 4,
  62.         // backgroundColor: "#f40", // => default transparent
  63.       });
  64.       this.screenShotSrc = canvas.toDataURL("image/png");
  66.       this.isCreating = false;
  67.       this.timer = setTimeout(() => {
  68.         this.createNewCanvas(this.index + 1);
  69.       }, this.duration); // 开启 - 自动轮播
  70.     },
  71.   },
  72. };
  73. </script>
  75. <style lang="less" scoped>
  76. #app {
  77.   display: flex;
  78.   justify-content: space-around;
  79.   align-items: center;
  80.   flex-direction: column;
  82.   height: 300px;
  83. }
  85. .container {
  86.   display: flex;
  88.   .box {
  89.     width: 100px;
  90.     height: 100px;
  91.     line-height: 100px;
  92.     border-radius: 5px;
  93.     text-align: center;
  94.     color: #fff;
  95.     font-size: 2rem;
  96.   }
  97. }
  99. .img-container {
  100.   display: flex;
  101.   height: 100px;
  102.   align-items: center;
  104.   .icon {
  105.     font-size: 1.5rem;
  106.     cursor: pointer;
  107.   }
  109.   .test-img {
  110.     height: 100px;
  111.     width: 100px;
  112.     border: 1px solid #ddd;
  113.     margin: 0 2rem;
  114.   }
  115. }
  116. </style>