第一步（如何生成一个二维码）
这里借助vue-qr这个插件来直接生成二维码，可以直接去npmjs.com里面搜索用法，我这儿直接写个例子。
<vue-qr
:text="downloadData.url"//扫描二维码跳转的链接
:logoSrc="downloadData.icon + '?cache'"//二维码中间那个图片
:logoScale="0.2"//中间图片占据的大小比例
:size="100"//二维码的大小
></vue-qr>
//还有二维码两种颜色等等各种
第二步（将二维码和字体或者背景图组合成一个div）
<div id="main" class="main">
<div class="header">
内容区域
</div>
<div class="content">
<vue-qr
:text="downloadData.url"
:margin="0"
:logoSrc="downloadData.icon + '?cache'"
:logoScale="0.2"
:size="100"
></vue-qr>
</div>
</div>
第三步（既然分享卡片都有模板了，但是他始终是一个div，如何变成一个image,因为image才能保存在相册，先使用html2cavans转换为canvas）
html2canvas主要功能就是将指定div内容直接截图，所以截图也会出现没有原图清晰的状态。所以二维码使用原色，并且中间图大小尽量小，防止扫描不到。
//两个参数：所需要截图的元素id，截图后要执行的函数， canvas为截图后返回的最后一个canvas
html2canvas(document.getElementById("main")).then(function(canvas) {
document.getElementById("container").appendChild(canvas);
});
第四步（将canvas变成image，通过image对象的形式来制作）
//两个参数：所需要截图的元素id，截图后要执行的函数， canvas为截图后返回的最后一个canvas
html2canvas(document.getElementById("main")).then(function(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
image.width = 200;
image.height = 300;
document.getElementById("container").appendChild(image);
});
第五步（我们最初画二维码和内容div，你不可能还没点击分享就显示在页面吧，这个div主要是为了截图生成照片的作用，因此我们应该隐藏）
隐藏div使用display:block,visibility:hidden实测不行，最后使用position:fixed,left:-10000,让他不出现在可视区域内就可以，最后图片显示的位置或者样式，自己调试均可，这个简易版的代码我就分享在下面了
<template>
<div id="container">
<div class="btn">
<button @click="handleClick">分享</button>
</div>
<div id="main" class="main">
<div class="header">
内容区域
</div>
<div class="content">
<vue-qr
:text="downloadData.url"
:margin="0"
:logoSrc="downloadData.icon + '?cache'"
:logoScale="0.2"
:size="100"
></vue-qr>
</div>
</div>
</div>
</template>
<script>
import html2canvas from "html2canvas";
import vueQr from "vue-qr";
import img from "./image/img-share.jpg";
export default {
components: {
vueQr,
},
data() {
return {
downloadData: {
url: "https://blog.csdn.net/fifteen718/article/details/85850511",
icon: img,
},
};
},
methods: {
handleClick() {
//两个参数：所需要截图的元素id，截图后要执行的函数， canvas为截图后返回的最后一个canvas
html2canvas(document.getElementById("main")).then(function(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
image.width = 200;
image.height = 300;
document.getElementById("container").appendChild(image);
});
},
},
};
</script>
<style lang="less">
.main {
width: 200px;
margin: 0 auto;
border: 1px solid red;
// position: fixed;
// left: -10000px;
background-image: url("./image/img-share.jpg");
background-size: 100% 100%;
// background-color: #ccc;
.header {
width: 200px;
height: 200px;
}
.content {
text-align: right;
}
.btn {
text-align: left;
}
}
</style>
简易效果：
