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-tableclass="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); // 转换为 blobvar 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"); // 转换图片为dataURLreturn 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());
});