关于获取html页面样式缩略图

html2canvas官网地址：html2canvas.hertzen.com/getting-sta…

1. 安装npm install html2canvas
2. 引入import vuedraggable from "vuedraggable";
3. html

<template>
  <div class="layout">
    <p>这个是标题</p>
    <vuedraggable class="wrapper" v-model="list">
      <transition-group>
        <div v-for="item in list" :key="item" class="item">
          <p>{{ item }}</p>
        </div>
      </transition-group>
    </vuedraggable>
    <img class="img" :src="pageData" alt="" />
  </div>
</template>

4. 使用方法

getphoto() {
  let item = document.querySelector(".layout");
  html2Canvas(item, {
    allowTaint: true,
  }).then((canvas) => {
    this.pageData = canvas.toDataURL("image/jpeg", 1.0);
  });
},

5. 效果图

6. 题外数据(给for循环中的每一项添加截图数据)

/**
 * @example: 获取缩略图
 */
getHumbnails() {
  document.querySelectorAll(".text-box").forEach((item, index) => {
    html2Canvas(item, {
      allowTaint: true
    }).then(canvas => {
      let contentWidth = canvas.width;
      let contentHeight = canvas.height;
      let pageHeight = (contentWidth / 592.28) * 841.89;
      let leftHeight = contentHeight;
      let position = 0;
      let imgWidth = 595.28;
      let imgHeight = (592.28 / contentWidth) * contentHeight;
      let pageData = canvas.toDataURL("image/jpeg", 1.0);
      this.$set(this.contractAggregate[index], "humbnail", pageData);
    });
  });
    },