vue生成海报(vue-canvas-poster)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
安装 vue-canvas-poster 插件
npm i --save vue-canvas-poster
封装成组件(微信长按保存图片)
<template>
<div class="talent_poster">
<vue-canvas-poster
:widthPixels="1000"
:painting="painting"
@success="canvasSuccess"
@fail="canvasFail"
></vue-canvas-poster>
<img :src="posterImg" />
<div class="tipTxt">长按保存或分享</div>
<!--关闭-->
<div style="width: 100%; text-align: center">
<div class="cancleBtn" @click="$emit('hideposter')">
<span id="close"></span>
</div>
</div>
</div>
</template>
<script>
import wx from "weixin-js-sdk";
export default {
middleware: "",
props: {},
components: {},
data() {
return {
showPoster: true,
posterImg: "", //生成的海报
painting: {
width: "750px",
height: "1168px",
background: "",
views: [
{
type: "qrcode",
content: "",
background: "transparent",
css: {
bottom: "350px",
left: "0",
right: "275px",
color: "#000",
background: "#fff",
width: "0px",
height: "0px",
borderWidth: "10px",
borderColor: "#fff",
},
},
{
type: "text",
text: "",
css: {
top: "36%",
right: "13.5%",
width: "325px",
maxLines: 1,
textAlign: "center",
fontSize: "70px",
color: "#0068B7",
},
},
{
type: "text",
text: "",
css: {
top: "44%",
right: "13.5%",
width: "325px",
maxLines: 1,
textAlign: "center",
fontSize: "70px",
color: "#0068B7",
},
},
],
},
};
},
created() {},
methods: {
open(item) {
if (item.paintingWidth || item.paintingHeight) {
this.painting.width = item.paintingWidth;
this.painting.height = item.paintingHeight;
}
this.painting.background = item.bgImg;
this.painting.views[0].content = item.codeUrl;
this.painting.views[0].css = item.css;
if (item.textObj) {
this.painting.views[1].text = item.textObj.txt1;
this.painting.views[2].text = item.textObj.txt2;
}
},
canvasSuccess(src) {
this.posterImg = src;
},
canvasFail(err) {
alert(err);
},
saveImg() {
wx.saveImageToPhotosAlbum({
filePath: this.posterImg,
success(res) {},
fail(err) {
console.log(err);
},
});
},
},
};
</script>
<style lang="less" scoped>
.talent_poster {
position: fixed;
width: 80%;
top: 50%;
left: 50%;
z-index: 999;
transform: translate(-50%, -50%);
margin: 0 auto;
img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
.tipTxt {
text-align: center;
color: #ccc;
}
}
</style>
使用组件
let data = {
paintingWidth: '816px',
paintingHeight: '1219px',
bgImg:‘’,
codeUrl:‘’,//网页地址
css: {
bottom: '14.5%',
left: '0',
right: '34.5%',
width: '260px',
height: '260px',
},
}
this.$refs.invitePoster.open(data)
效果
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)