前言
之前的文章：vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题 简单介绍了html2canvas的基本使用，html2canvas 只能截取可视区域，对于含有滚动条的无法完全截取。后来发现还有一个dom-to-image的库可以支持，并且能够生成svg、png、jpeg 3种格式，当然缺点是不支持safari，并且手机端上兼容性不好。
官方文档 ，不得不说有些库是真恶心，起个差不多的名字，找了半天才找到
安装
npm install dom-to-image
import domtoimage from 'dom-to-image';
主要方法和属性
方法：
- domtoimage.toPng(…);将节点转化为png格式的图片
- domtoimage.toJpeg(…);将节点转化为jpg格式的图片
- domtoimage.toSvg(…);将节点转化为svg格式的图片，生成的图片的格式都是base64格式
- domtoimage.toBlob(…);将节点转化为二进制格式，这个可以直接将图片下载
- domtoimage.toPixelData(…);获取原始像素值，以Uint8Array 数组的形式返回，每4个数组元素表示一个像素点，即rgba值。这个方法也是挺实用的，可以用于WebGL中编写着色器颜色。
属性：
- filter ： 过滤器节点中默写不需要的节点；
- bgcolor ： 图片背景颜色；
- height, width ： 图片宽高；
- style ：传入节点的样式，可以是任何有效的样式；
- quality ： 图片的质量，也就是清晰度；一个介于 0 和 1 之间的数字，表示 JPEG 图像的图像质量（例如 0.92 => 92%）。默认为 1.0 (100%)
- cacheBust ： 将时间戳加入到图片的url中，相当于添加新的图片；
- imagePlaceholder ： 图片生成失败时，在图片上面的提示，相当于img标签的alt；
使用
png
<template>
<div>
<div style="padding:50px;width:500px;border:1px solid red;" id="test">
<p>我是p标签</p>
<h1>我是h1标签</h1>
<div>我是div标签</div>
<img src="./11.jpg" style="width:200px;" />
</div>
<el-button type="primary" @click="createImage">生成图片</el-button>
<div style="width:500px;height:200px;margin-top:20px;border:1px solid red;">
<p>生成的图片</p>
<img :src="dataUrl" style="width:200px;" />
</div>
</div>
</template>
<script>
import domtoimage from 'dom-to-image'
export default {
data() {
return {
dataUrl: ''
}
},
methods: {
createImage() {
let node = document.getElementById('test');
let that = this
domtoimage.toPng(node)
.then(function (dataUrl) {
//console.log(dataUrl)
that.dataUrl = dataUrl
})
.catch(function (error) {
console.error('生成失败', error);
});
}
}
}
</script>
效果
其他格式
代码同png，用对应的方法即可
属性
filter
createImage() {
let node = document.getElementById('test');
let that = this
domtoimage.toPng(node, { filter: that.filterTag })
.then(function (dataUrl) {
console.log(dataUrl)
that.dataUrl = dataUrl
})
.catch(function (error) {
console.error('生成失败', error);
});
},
filterTag(node) {
console.log(node, node.tagName)
return node.tagName == 'IMG'
}
注意：先打印一下标签名，一开始以为图片就是img结果是IMG
bgcolor
domtoimage.toPng(node, { bgcolor: '#ddd' })
.then(function (dataUrl) {
console.log(dataUrl)
that.dataUrl = dataUrl
// FileSaver.saveAs(dataUrl, 'a.png');
})
.catch(function (error) {
console.error('生成失败', error);
});
其他略，没有尝试
下载图片
需要借助：file-saver，基本使用见：FileSaver.js的简单使用
示例：
<template>
<div>
<div style="padding:50px;width:500px;border:1px solid red;" id="test">
<p>我是p标签</p>
<h1>我是h1标签</h1>
<div>我是div标签</div>
<img src="./11.jpg" style="width:200px;" />
</div>
<el-button type="primary" @click="createImage">生成图片</el-button>
<div style="width:500px;height:200px;margin-top:20px;border:1px solid red;">
<p>生成的图片</p>
<img :src="dataUrl" style="width:200px;" />
</div>
</div>
</template>
<script>
import domtoimage from 'dom-to-image'
import FileSaver from 'file-saver';
export default {
data() {
return {
dataUrl: ''
}
},
methods: {
createImage() {
let node = document.getElementById('test');
let that = this
domtoimage.toPng(node)
.then(function (dataUrl) {
console.log(dataUrl)
that.dataUrl = dataUrl
FileSaver.saveAs(dataUrl, 'a.png');
})
.catch(function (error) {
console.error('生成失败', error);
});
},
}
}
</script>
