自己整理的vue实现生成分享海报(含二维码),看着网上的没实现
【摘要】 大家好,我是雄雄。 前言相信大家在许多的场景下,看到过这样的案例。当我们在某购物app上看好一件商品,想分享给别人时,app会给我们生成一张海报,我们将其保存在手机里面转发给其他人达到分享。当我们逛CSDN的时候,想要将某篇有营养的文章分享给别人时,也会生成一张好看的海报,用户只需一扫码,既能跳转到相应页面浏览。在某些个人博客,比如:穆雄雄的博客中,我们看到某篇正合胃口的文章,想要分享给别人...
大家好,我是雄雄。
前言
相信大家在许多的场景下,看到过这样的案例。
- 当我们在某购物
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");
});
},
当然,这里面的部分代码也是从网上看的别人的,拼拼凑凑出来的,我在他们的基础上改了改。
然后我们就实现生成海报的功能啦。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)