dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量(SVG)或光栅(PNG或JPEG)图像的库。 它基于Paul Bakaus的domvas并且已被完全重写,修复了一些错误并添加了一些新功能(如Web字体和图像支持)。
github:点击查看
线上demo:点击查看
npm安装和引用
npm install dom-to-image
import domtoimage from 'dom-to-image';
domtoimage方法和属性
domtoimage主要的方法有:
domtoimage.toPng(...);将节点转化为png格式的图片
domtoimage.toJpeg(...);将节点转化为jpg格式的图片
domtoimage.toSvg(...);将节点转化为svg格式的图片,生成的图片的格式都是base64格式
domtoimage.toBlob(...);将节点转化为二进制格式,这个可以直接将图片下载
domtoimage.toPixelData(...);获取原始像素值,以Uint8Array 数组的形式返回,每4个数组元素表示一个像素点,即rgba值。这个方法也是挺实用的,可以用于WebGL中编写着色器颜色。
domtoimage主要的属性有:
filter : 过滤器节点中默写不需要的节点;
bgcolor : 图片背景颜色;
height, width : 图片宽高;
style :传入节点的样式,可以是任何有效的样式;
quality : 图片的质量,也就是清晰度;
cacheBust : 将时间戳加入到图片的url中,相当于添加新的图片;
imagePlaceholder : 图片生成失败时,在图片上面的提示,相当于img标签的alt;
实现代码
<template>
<div id="pageDiv" :style="{'padding-top':isWeiXin || isApps?'0':'3rem'}">
<!-- 页面头部-->
<header-com :poptitle="'domtoimage截图'" :type="'doc_title'" v-if="!isWeiXin && !isApps"></header-com>
<!-- 页面的主要内容 -->
<section class="content">
<div class="qr-code-box" id="my-node">
<vue-qr
:logoSrc="config.logo"
:text="config.value"
class="qr-code-pic"
:correctLevel="3"
:margin="0"
:dotScale="0.5"
></vue-qr>
<button type="button" class="shot-btn" @click="shotPic">截图</button>
<img :src="img" v-if="img" />
</div>
</section>
</div>
</template>
<script>
import HeaderCom from "@/components/header"; //页面头部
import { changeUrl } from "@/utils/changeUrl";
import VueQr from 'vue-qr'; //二维码插件
import domtoimage from 'dom-to-image'
export default {
data() {
return {
isWeiXin: TS_WEB.isWeiXin,
isApps: TS_WEB.isApp,
config: {
value: "",
logo: require("@/statics/images/system/sjbj.jpg")
},
img: ""
};
},
components: {
HeaderCom,
VueQr,
domtoimage
},
methods: {
changeUrl,
shotPic() {
let node = document.getElementById('my-node');
domtoimage.toPng(node)
.then((dataUrl) => {
this.img = dataUrl;
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
},
mounted() {
this.config.value = "https://www.baidu.com/";
},
created() {
document.title = "domtoimage截图";
}
};
</script>
<style scoped>
// 盒子模型
#pageDiv {
width: 100%;
height: 100%;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
position: relative;
box-sizing: border-box;
.content {
height: 100%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
.qr-code-box {
width: 100%;
height: 100%;
#new_img {
width: 100%;
display: block;
}
}
}
}
</style>
效果预览