Dom 元素转换 Image 图片 (截图)

Dom 元素转换 Image 图片 (截图)

dom-to-image

dom-to-image NPM 官网文档

参考文章@码上行舟

dom-to-image 是如何将 html 转换成图片的(文章参考)

安装

npm install dom-to-image --save

使用

/* in ES 6 */
import domtoimage from "dom-to-image";
/* in ES 5 */
var domtoimage = require("dom-to-image");

var node = document.getElementById("my-node"); //  获取需要转换成图片的dom元素

domtoimage
  .toPng(node)
  .then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch(function (error) {
    console.error("oops, something went wrong!", error);
  });

案例解释

vue2 项目,复制代码即可看见效果

<template>
  <div class="container">
    <el-table
      class="tableDom"
      ref="tableRef"
      :data="tableData"
      style="width: 100%"
      border
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="sex" label="性别" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <div style="background: tomato; width: 100%">
      <img :src="imageUrl" alt="" />
    </div>
  </div>
</template>

<script>
  import domtoimage from "dom-to-image";
  export default {
    name: "Helloworld",
    mounted() {
      let tableDom = document.querySelector(".tableDom");
      this.domShot(tableDom);
    },

    data() {
      return {
        imageUrl: "",
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            sex: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            sex: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            sex: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            sex: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      };
    },
    methods: {
      domShot(dom) {
        domtoimage.toPng(dom, { quality: 0.92 }).then((dataUrl) => {
          //保存图片
          this.imageUrl = dataUrl;
        });
      },
    },
  };
</script>

<style lang="scss" scoped></style>

dom-to-image 部分方法封装

import domtoimage from "dom-to-image";

// dom截图
domShot(dom) {
  domtoimage
    .toPng(dom, { quality: 0.92 })
    .then((dataUrl) => {
      //保存图片
      let saveFile = (data, filename) => {
        let img = new Image();
        img.src = data;
        img.onload = () => {
          // 缩放图片
          const dataUrl = this.scalcImage(img);
          this.download(dataUrl, filename);
        };
      };
      saveFile(dataUrl, this.getFilename());
    });
},
// 下载图片
download(dataUrl, filename) {
  var blob_ = this.data_to_blob(dataUrl); // 转换为 blob
  var link = document.createElement("a");
  link.setAttribute("href", window.URL.createObjectURL(blob_));
  link.setAttribute("download", filename);
  link.click();
},
// 缩放图片到0.8
scalcImage(img) {
  var canvas = document.createElement("canvas"); // 创建canvas元素
  var scale = 0.8;
  var width = img.width * scale; // 确保canvas的尺寸和图片一样
  var height = img.height * scale;
  canvas.width = width;
  canvas.height = height;
  canvas.getContext("2d").drawImage(img, 0, 0, width, height); // 将图片绘制到canvas中
  const dataUrl = canvas.toDataURL("image/png"); // 转换图片为dataURL
  return dataUrl;
},
// 获得文件名
getFilename() {
  //获取年月日作为文件名
  const timers = new Date();
  const fullYear = timers.getFullYear();
  const month = timers.getMonth() + 1;
  const date = timers.getDate();
  const randoms = Math.random() + "";
  //年月日加上随机数
  let numberFileName =
    fullYear + "" + month + date + randoms.slice(3, 10);
  return numberFileName + '.png'
}

html2canvas

npm 官网文档

中文文档

安装

npm install html2canvas --save

使用

import html2canvas from "html2canvas";
html2canvas(dom).then((canvas) => {
  this.download(canvas.toDataURL("image/png"), this.getFilename());
});