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

2024 年 9 月 6 日 4点热度 0人点赞 0条评论

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());
});