Skip to content

M
mayi-mp-shop
Commit 8b7ff472 by 李嘉林
Options

画海报

parent b32ebd1c
Showing with 120 additions and 120 deletions
src/app.json
{
"pages": [
"pages/index/main",
"pages/testCanvasPoster/main",
"pages/livedPoster/main",
"pages/lived/main",
"pages/login/main",
"pages/wxPay/main",
......
src/components/livedModel/livedShareDia.vue
......@@ -16,7 +16,7 @@
<p class="tit">微信分享</p>
</button>
</div>
<div class="createPoster">
<div class="createPoster" @click="isLogin">
<img
src="data:image/png;base64,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"
alt
......@@ -36,10 +36,10 @@ export default {
name: "",
data() {
return {
liveId:"",
liveId: "",
shopName: "",
shopLogo: "",
backPath: "",
backPath: ""
};
},
components: {},
......@@ -62,6 +62,41 @@ export default {
// 关闭
closeDia() {
this.$emit("closeShareDia");
},
// 是否登录
isLogin(val) {
let _this = this;
wx.getStorage({
key: "sessionid",
success(res) {
_this.toCreatePoster();
},
fail(res) {
console.log("未登录------150");
// 跳转登录页
let backUrl = "/lived/main";
let query = {
liveId: _this.liveId,
fromType: "mini"
};
let url = `/pages/login/main?back=${backUrl}&params=${JSON.stringify(
query
)}`;
wx.navigateTo({
url: url
});
}
});
},
// 去海报页面
toCreatePoster() {
let query = {
liveId: this.liveId
};
let url = `/pages/livedPoster/main?params=${JSON.stringify(query)}`;
wx.navigateTo({
url: url
});
}
}
};
......@@ -96,7 +131,7 @@ img {
}
}
.wxShare {
button{
button {
display: flex;
flex-direction: column;
align-items: center;
......
src/pages/testCanvasPoster/index.vue → src/pages/livedPoster/index.vue
<template>
<div class="test">
<!--index.wxml-->
<view class="posterWrap">
<canvas canvas-id="posterCanvas" class="myCanvas"></canvas>
<div class="fixed_container">
<div class="fixed_inner">
<div @click="handleShowImg">
<img src="../../../static/images/lived/goodsImg.png" alt />
<span>发送给朋友</span>
<div class="livedPoster">
<div class="posterWrap">
<canvas canvas-id="posterCanvas" class="myCanvas" @click="getImg"></canvas>
</div>
<div @click="handleSave">
<img src="../../../static/images/lived/goodsImg.png" alt />
<span>保存名片</span>
</div>
</div>
</div>
</view>
</div>
</template>
<script type="text/ecmascript-6">
import { serialize, getQueryVariable, DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
name: "",
data() {
return {
InfoSync: {},
liveId: 0,
params: {},
// 海报中信息
info: {
coverUrl: "",
livedStatus: 1, //直播状态 0未开播 1一开播
livedTime: "3月21日 20:20",
livedTitle: "",
nickName: "",
avatarUrl: ""
avatarUrl: "",
miniCode: ""
}
};
},
components: {},
computed: {},
onLoad() {
onLoad(options) {
this.params = JSON.parse(options.params);
this.liveId = this.params.liveId;
this.init();
},
onUnload() {},
methods: {
back() {
wx.navigateBack({
delta: 1
});
},
init() {
let liveBroadcastId = this.liveId;
let _this = this;
live.getLiveInfo(liveBroadcastId).then(res => {
if (res.data.code == 200) {
let resData = res.data.data;
this.info.livedTitle = resData.title;
this.info.livedStatus = resData.liveBroadcastState;
this.info.coverUrl = DFSImg(resData.coverUrl);
let newTime = new Date(resData.startTime.replace(/-/g, "/"));
this.info.livedTime = `${newTime.getMonth() +
1}月${newTime.getDate() -
1}日 ${newTime.getHours()}:${newTime.getMinutes()}`;
wx.getUserInfo({
//获取微信用户信息
success: function(res) {
console.log(res, "----------------108");
(_this.info.nickName = res.userInfo.nickName),
(_this.info.avatarUrl = res.userInfo.avatarUrl),
_this.initPoster(_this.info);
},
fail: function(res) {
_this.initPoster(_this.info);
}
});
}
});
this.initPoster(this.info);
},
created() {},
mounted() {},
methods: {
initPoster(info) {
const InfoSync = wx.getSystemInfoSync();
this.InfoSync = InfoSync;
let bili = InfoSync.windowWidth / 375 * 1;
const ctx = wx.createCanvasContext("posterCanvas");
ctx.setTextAlign("center"); // 文字居中 ctx.fillText（显示文字，距离画布左边/基准点/文字以这个点居中或左对齐，距离画布顶部）
ctx.setFillStyle("#111"); // 文字颜色：fff
ctx.setFontSize(16); // 文字字号
ctx.fillText(info.livedTime, 155 * bili, 164 * bili); //名字 ctx.fillText（显示文字，距离画布左边/基准点/文字以这个点居中或左对齐，距离画布顶部
ctx.setFillStyle("#fff");
ctx.fillRect(0, 0, 310 * bili, 520 * bili);
ctx.setFontSize(14); // 文字字号
ctx.setTextAlign("left"); // 文字居中
ctx.setFillStyle("#111"); // 文字颜色：fff
ctx.fillText("生日：1990-01-01", 90 * bili, 256 * bili);
ctx.fillText("电话：9090980", 90 * bili, 284 * bili);
ctx.setFillStyle("#111"); // 文字颜色：111
ctx.setTextAlign("left"); // 文字居中
ctx.setFontSize(17); // 文字字号
ctx.fillText("写两次让字体加粗", 140 * bili, 346 * bili);
ctx.fillText("写两次让字体加粗", 140 * bili, 346 * bili);
ctx.setFillStyle("#828282"); // 文字颜色：828282
ctx.setFontSize(14); // 文字字号
ctx.fillText("写一次不加粗", 140 * bili, 376.5 * bili);
ctx.setFillStyle("#B0B0B0"); // 文字颜色：B0B0B0
ctx.setFontSize(11); // 文字字号
ctx.fillText("小字体", 140 * bili, 398 * bili);
//封面
this.saveThe(info.coverUrl, path => {
ctx.drawImage(path, 0, 0, 310 * bili, 370 * bili);
ctx.save();
// 微信昵称
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(15);
ctx.fillText(info.nickName, 80 * bili, 420 * bili);
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
ctx.fillText("邀你一起看直播", 10 * bili, 460 * bili);
// 直播名
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(18);
ctx.fillText(info.livedTitle, 10 * bili, 500 * bili);
//圆形头像框
ctx.setStrokeStyle("rgba(0,0,0,0)");
ctx.arc(155 * bili, 94 * bili, 45 * bili, 0, 2 * Math.PI);
ctx.arc(40 * bili, 410 * bili, 30 * bili, 0, 2 * Math.PI);
ctx.fill();
//二维码
this.saveThe(
"http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/png/08af1c1f-b7a8-4bac-b85d-36e3cfc5cd05.png",
path => {
ctx.drawImage(path, 30.5 * bili, 320 * bili, 93 * bili, 93 * bili);
ctx.save();
//头像
this.saveThe(
"http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/png/08af1c1f-b7a8-4bac-b85d-36e3cfc5cd05.png",
path => {
this.saveThe(info.avatarUrl, path => {
ctx.clip();
ctx.drawImage(
path,
110 * bili,
47.5 * bili,
90 * bili,
90 * bili
);
ctx.drawImage(path, 10 * bili, 380 * bili, 70 * bili, 70 * bili);
ctx.save();
ctx.stroke();
ctx.draw();
}
);
}
);
});
});
},
// 小程序需要将图片下载下来，然后才能绘制到画布上
saveThe(url, callback) {
......@@ -118,6 +118,9 @@ export default {
fail: function(res) {}
});
},
getImg() {
this.handleSave();
},
// 点击保存时，将画布生成海报
handleSave() {
var that = this;
......@@ -246,59 +249,20 @@ export default {
};
</script>
<style scoped>
<style scoped lang="scss">
.livedPoster {
position: relative;
}
.posterWrap {
min-height: calc(100vh - 40px);
padding-top: 40px;
min-height: calc(100vh - 20px);
padding-top: 20px;
background-color: #f1f1f1;
}
.myCanvas {
width: 310px;
height: 435px;
height: 520px;
margin: 0 auto;
background: #fff;
}
.fixed_container {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1000;
}
.fixed_inner {
display: flex;
justify-content: space-between;
border-top: 1rpx solid #e5e5e5;
padding: 20rpx 32rpx;
background: #ffffff;
align-items: center;
}
.fixed_inner div {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 5rpx;
width: 330rpx;
height: 76rpx;
line-height: 76rpx;
text-align: center;
background: -webkit-linear-gradient(left, #27caac, #02ba8e);
background: -o-linear-gradient(right, #27caac, #02ba8e);
background: -moz-linear-gradient(right, #27caac, #02ba8e);
background: linear-gradient(to right, #27caac, #02ba8e); /* 标准的语法 */
}
.fixed_inner div:last-child {
background: -webkit-linear-gradient(left, #ff7179, #ff6459);
background: -o-linear-gradient(right, #ff7179, #ff6459);
background: -moz-linear-gradient(right, #ff7179, #ff6459);
background: linear-gradient(to right, #ff7179, #ff6459);
}
.fixed_inner div img {
width: 42rpx;
height: 32rpx;
margin-right: 11rpx;
}
</style>
src/pages/testCanvasPoster/main.json → src/pages/livedPoster/main.json
{
"navigationBarTitleText": "测试canvas绘制海报"
"navigationBarTitleText": "点击保存图片"
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment