首先感谢作者:巨人
1首先安装依赖包
cnpm install html2canvas --save
sudo cnpm i qrcanvas --save
2
<template>
<div>
<!-- 设置了两个块区域 当点击了生成海报时把canvas转换成base64的图片,然后把最开始当样式隐藏掉 把获取的的base64的地址赋值给src-->
<img class="kahuf" v-if="!test" :src="imgSrc" alt />
<div v-else>
<div class="baijing">
<img src="../../img/dc7a43e32fdbfbe605edf8347cbbde4.png" alt />
<!-- . //图片这里自己找一个 -->
<div id="qrcode"></div>
</div>
<button @click="btn" v-if="shuuju">点我生成</button>
</div>
</div>
</template>
<script>
import { qrcanvas } from "qrcanvas";
//将整个页面转换成canvas
import html2canvas from "html2canvas";
export default {
data() {
return {
test: true,
imgSrc: "",
};
},
methods: {
btn() {
this.shuuju=false
//生成一个二维码 data是二维码跳转的地址(写自己需要跳转的地址即可)
const canvas = qrcanvas({
data:
"https://www.baidu.com/s?ie=UTF-8&wd=%E8%8A%B1%E7%93%A3&tn=78000241_30_hao_pg",
// console.log( data)
});
document.getElementById("qrcode").appendChild(canvas);
//点击生成canvas转换成base64的图片
this.$nextTick(() => {
const that = this;
html2canvas(document.body).then(function (canvas) {
// console.log(canvas.toDataURL());
that.imgSrc = canvas.toDataURL();
});
//隐藏元素
this.test = false;
});
},
},
mounted() {},
};
</script>