大家好，我是雄雄。
前言
相信大家在许多的场景下，看到过这样的案例。
- 当我们在某购物
app上看好一件商品，想分享给别人时，app会给我们生成一张海报，我们将其保存在手机里面转发给其他人达到分享。 - 当我们逛CSDN的时候，想要将某篇有营养的文章分享给别人时，也会生成一张好看的海报，用户只需一扫码，既能跳转到相应页面浏览。
- 在某些个人博客，比如：穆雄雄的博客中，我们看到某篇正合胃口的文章，想要分享给别人怎么办？也会生成一张精美小海报，然后随便转发。
今天，我们就来看看，如何使用vue实现精致海报的分享。
效果图
类似这样的吧，下面的是CSDN的，上面的是我自己做的，可能不如CSDN做的专业，但是我的那种，你的背景图片是可以自己换的，所以如果你的审美比较好，那么你可以自己设计一个背景图，或者多张进行随机切换，我这边就是提供一下实现思路。
右下角是这篇文章的二维码，一扫就自动跳转过来了。
实现思路
- 准备一张精美的背景图，比如我这样的。（也可以准备多张，实现随机切换，实现代码我明天放上来），我的放在了七牛云里面了，大家也可以直接放在本地。
- 将当前内容生成一个二维码，放在右下角的位置，技术：
qrcodejs2 - 将
html转换成canvas，技术：html2canvas - 按照自己想要的格式调整下样式即可。
其实思路，我看网上大家都是这么说的，我确实也是这么做的，但是按照网上的代码，确实也没有实现出来，所以自己写了个。
代码实现
- 安装
qrcodejs2以来
npm i qrcodejs2
2. 安装html2canvas依赖
npm i html2canvas
3. 在需要生成海报的页面，分别导入这两个依赖。
/*引入二维码*/
import QRCode from "qrcodejs2";
//html转换成canvas
import html2canvas from "html2canvas";
- 在页面上写个
div，用来存放海报的，我这是放在了el-dialog里面了，各人有各人的需求。
<!--分享海报的弹出层-->
<el-dialog
width="20%"
height="200px"
center
:visible.sync="dialogFengXiang"
>
<!-- 海报html元素 -->
<div id="posterHtml" v-show="isShowBg">
<div class="fx_content ">
<span style="color: #000000;font-size: 16px">{{ posterTitle }}</span>
<p style="font-size: 12px;">
关注微信订阅（公众）号【雄雄的小课堂】;
<br />
博客网址：https://www.穆雄雄.com
</p>
</div>
<!-- 二维码 -->
<div id="qrcodeImg" ref="qrcodeImg"></div>
</div>
</el-dialog>
- 大致设置一下样式吧,在
style里面写：
/*分享的内容*/
.fx_content {
width: 70%;
float: left;
margin: 109% 0 0 2%;
}
/*整个海报*/
#posterHtml {
background-image: url(https://blogobs.88688.team/blog/fx-bg1.png);
background-repeat: no-repeat;
width: 100%;
height: 450px;
background-size: 100% 450px;
margin: 0;
padding: 0;
}
/*二维码*/
#qrcodeImg {
width: 25%;
height: 150px;
float: right;
margin-top: 108%;
}
- 在
data中声明变量：
data: function() {
return {
// 文案标题
posterTitle: "",
// 文案内容
posterContent: "",
// 最终生成的海报图片
posterImg: "",
isShowBg: false,
//是否显示对话框
dialogFengXiang: false
};
},
- 在
methods中实现两个功能，生成二维码和生成海报：
//分享的功能
fenxiang() {
this.createPoster();
this.createQrcode();
this.dialogFengXiang = true;
},
// 生成二维码
createQrcode() {
this.$refs.qrcodeImg = "";
setTimeout(() => {
// 生成二维码
new QRCode(this.$refs.qrcodeImg, {
text: this.articleHref,
width: 75,
height: 75,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}, 200);
// qrcode.makeCode(text);
},
//生成海报
createPoster() {
// 生成海报
const vm = this;
//重新弄一下标题
//let content = this.article.content.substring(0,110);
/*let content = "";
this.posterContent = content+"....";*/
this.posterTitle = this.article.title.substring(0, 12) + "....";
const domObj = document.getElementById("posterHtml");
//显示海报
this.isShowBg = true;
html2canvas(domObj, {
useCORS: true,
allowTaint: false,
logging: false,
letterRendering: true,
onclone(doc) {
let e = doc.querySelector("#posterHtml");
e.style.display = "block";
}
}).then(function(canvas) {
// 在微信里,可长按保存或转发
vm.posterImg = canvas.toDataURL("image/png");
});
},
当然，这里面的部分代码也是从网上看的别人的，拼拼凑凑出来的，我在他们的基础上改了改。
然后我们就实现生成海报的功能啦。
