vue使⽤domtoimage实现移动端H5页⾯截图
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主要的属性有：
filter ：过滤器节点中默写不需要的节点；
bgcolor ：图⽚背景颜⾊；
height, width ：图⽚宽⾼；
style ：传⼊节点的样式，可以是任何有效的样式；
quality ：图⽚的质量，也就是清晰度；
cacheBust ：将时间戳加⼊到图⽚的url中，相当于添加新的图⽚；
imagePlaceholder ：图⽚⽣成失败时，在图⽚上⾯的提⽰，相当于img标签的alt；
实现代码
<template>
<div id="pageDiv" :>
<!-- 页⾯头部-->
<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" />
svg图片怎么使用</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 = ElementById('my-node');
.then((dataUrl) => {
this.img = dataUrl;
})
.catch(function (error) {
<('oops, something went wrong!', error);        });
}
},
mounted() {
},
created() {
document.title = "domtoimage截图";
}
};
</script>
<style lang="less" 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>
效果预览

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。