1、将商品图片和二维码生成海报在屏幕中间
子组件代码
<template>
<view>
<div class="poster">
<div class="posterBox">
<div class="posterCard">
<canvas canvas-id="posterCanvas" class="myCanvas"
style="background-color: #FFFFFF;width:660rpx;height:920rpx;"></canvas>
</div>
<view class="poserBtn" @click="getAlbum">
保存至相册
</view>
</div>
</div>
</view>
</template>
<script>
export default {
props:{
isshow:{
type: Boolean
},
//商品图片
pic: {
type: String,
default: function() {
return ''
}
},
// 商品名称
prodName: {
type: String,
default: function() {
return ''
}
},
// 商品金额
price: {
type: String,
default: function() {
return 0
}
},
// 二维码图片
erQured: {
type: String,
default: function() {
return '/images/08d31f6bda294b91a5ce568f4006f563.png'
}
},
},
data() {
return {
imgPic: "",
value:'1'
}
},
onLoad() {
},
created() {
this.getShare()
uni.showLoading({
title: "专属海报来啦...",
mask: true
});
},
methods: {
closePopup(){
console.log('ooo');
let _that = this
_that.$emit('fatherMethod',false)
},
getShare() {
var _this = this;
uni.downloadFile({
url: this.pic,
success: function(res) {
console.log(res)
_this.imgPic = res.tempFilePath;
console.log(_this.imgPic)
_this.drawImage()
}
})
},
drawImage() {
var _that = this
const InfoSync = uni.getSystemInfoSync();
let bili = InfoSync.windowWidth / 375 * 1;
const ctx = uni.createCanvasContext("posterCanvas", this);
//背景色
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, 330 * bili, 500 * bili);
// image
ctx.drawImage(_that.imgPic, 25 * bili, 10 * bili, 280 * bili, 280 * bili);
ctx.save();
//商品价格
ctx.setFillStyle("#333333");
ctx.setFontSize(26 * bili);
// ctx.setTextAlign("bottom");
ctx.fillText(_that.price, 37 * bili, 325 * bili);
//商品名称
ctx.setFillStyle("#333333");
ctx.setFontSize(14 * bili);
ctx.fillText(_that.prodName, 37 * bili, 360 * bili);
//识别二维码访问
ctx.fillText('长按识别二维码访问' , 37 * bili, 400 * bili);
ctx.drawImage(_that.erQured, 220 * bili, 370 * bili, 80 * bili, 80 * bili);
ctx.save();
ctx.draw()
wx.hideLoading();
},
//获取画布,需要延时进行,否则获取到的画布为空
getCanves(){
var _that = this
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'posterCanvas',
success: function(res) {
_that.savePoster(res.tempFilePath)
},
fail: function(res) {
console.log(res.errMsg)
}
}, this)
}, 1000)
},
//将获取到的画布传值进行保存
savePoster(shareImagePath) {
var that = this
setTimeout(() => {
wx.saveImageToPhotosAlbum({
filePath: shareImagePath,
success(res) {
wx.showToast({
title: '保存成功',
icon: 'none'
})
setTimeout(() => {
wx.hideLoading()
that.$emit('fatherMethod',false)
}, 300)
},
fail() {
wx.showToast({
title: '保存失败,请刷新页面重试',
icon: 'none'
})
setTimeout(() => {
wx.hideLoading()
}, 300)
}
})
}, 500)
},
//在保存之前先判断用户是否授权
getAlbum() {
var that = this;
wx.showLoading({
title: '正在保存...',
mask: true
})
wx.getSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]) {
that.getCanves();
} else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
wx.authorize({
scope: "scope.writePhotosAlbum",
success() {
that.getCanves();
},
fail() {
wx.hideLoading();
wx.showToast({
title: "您没有授权,无法保存到相册",
icon: "none"
});
}
});
} else {
wx.openSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]) {
that.getCanves();
} else {
wx.showToast({
title: "您没有授权,无法保存到相册",
icon: "none"
});
}
}
});
}
},
fail: err => {
wx.hideLoading();
wx.showToast({
title: "出现了错误,请稍后再试",
icon: "none"
});
}
});
}
}
}
</script>
<style lang="scss">
.poster {
height: 50vh;
.closePopup{
width: 30rpx;
height: 30rpx;
position: fixed;
right: 40rpx;
top: 260rpx;
}
.posterBox {
padding-top: 30rpx;
.posterCard {
width: 660rpx;
height: 900rpx;
margin: 0 auto;
background-color: #FFFFFF;
box-shadow: 0px 0px 8px 0px rgba(10, 2, 4, 0.04);
}
.poserBtn {
width: 630rpx;
height: 80rpx;
background-color: #D32B20;
border-radius: 10rpx;
margin: 0 auto;
margin-top: 100rpx;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
line-height: 80rpx;
}
}
}
</style>
<!-- 生成海报 start -->
<u-popup v-if="isshow" :show="isshow" @close="close('isshow')" >
<view class="poster">
<canvas-paint :pic='info.pic' :erQured='codeImg' :prodName='info.prodName' :price='price'
@fatherMethod="clickMe">
</canvas-paint>
</view>
</u-popup>
import canvas '@/component/canvas'