Browse Source

图层

h5_css
yanyan 3 years ago
parent
commit
8c2937ba25
  1. 41
      subpkg/complete/complete.vue

41
subpkg/complete/complete.vue

@ -81,7 +81,7 @@
</view> </view>
</view> </view>
</view> </view>
<canvas class="shengcheng" id="photo" type="2d"></canvas> <canvas :style="picStyle" class="shengcheng" id="photo" type="2d"></canvas>
<!--生成海报后的图 --> <!--生成海报后的图 -->
<view v-if="showLoad"> <view v-if="showLoad">
<view class='imagePathBox'> <view class='imagePathBox'>
@ -123,7 +123,8 @@
"showLoad": false, "showLoad": false,
canvas: null, //canvas 对象 canvas: null, //canvas 对象
tempFilePath: "", tempFilePath: "",
"imageQR": '' "imageQR": '',
picStyle:"z-index:-99999"
}; };
}, },
//分享到好友 //分享到好友
@ -219,7 +220,7 @@
guid: this.userId guid: this.userId
}) })
if (!res.success) return uni.$showMsg() if (!res.success) return uni.$showMsg()
this.achieveMedalImg = uni.$http.baseUrl + res.data this.achieveMedalImg = "http://146.56.223.227:9527/profile//2024/03/15/52ce69e2db8e362f225d3c00e10d6fdd.png"
if (res.data == null || res.data == "") { if (res.data == null || res.data == "") {
this.showMedal = false this.showMedal = false
this.showLayer = false this.showLayer = false
@ -264,6 +265,7 @@
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 800) ctx.clearRect(0, 0, 500, 800)
this.showLoad = false this.showLoad = false
this.picStyle ="z-index:-99999"
}, },
saveImage() { saveImage() {
uni.canvasToTempFilePath({ uni.canvasToTempFilePath({
@ -280,6 +282,7 @@
title: '保存成功', title: '保存成功',
}) })
this.showLoad = false this.showLoad = false
this.picStyle ="z-index:-99999"
const canvas = this.canvas; const canvas = this.canvas;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 800) ctx.clearRect(0, 0, 500, 800)
@ -326,6 +329,7 @@
image.src = '/static/images/share_bg.png' image.src = '/static/images/share_bg.png'
// 图片对象 // 图片对象
const imageQR = canvas.createImage() const imageQR = canvas.createImage()
console.log(this.imageQR)
imageQR.src = this.imageQR imageQR.src = this.imageQR
image.onload = () => { image.onload = () => {
// 将图片绘制到 canvas 上 // 将图片绘制到 canvas 上
@ -334,32 +338,10 @@
} }
}) })
this.showLoad = true this.showLoad = true
this.picStyle ="z-index:99999"
this.showShare = false this.showShare = false
this.showLayer = false this.showLayer = false
}, },
saveImage() {
uni.canvasToTempFilePath({
canvasId: 'photo',
destWidth: 286,
destHeight: 417,
canvas: this.canvas,
success: (res) => {
this.tempFilePath = res.tempFilePath
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res) => {
wx.showToast({
title: '保存成功',
})
this.showLoad = false
const canvas = this.canvas;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 800)
}
})
}
});
},
itemClickHandler(item) { itemClickHandler(item) {
if (item !== "") { if (item !== "") {
this.ask = item.ask this.ask = item.ask
@ -443,7 +425,7 @@
.title { .title {
display: inline-block; display: inline-block;
margin-top: 1.0vh; margin-top: 1.75vh;
} }
} }
@ -651,14 +633,13 @@
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 999; z-index: 999;
pointer-events: none;
} }
.btnbox { .btnbox {
display: flex; display: flex;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
bottom: 2%; bottom: 10%;
left: 10%; left: 10%;
width: 80%; width: 80%;
height: 90rpx; height: 90rpx;
@ -672,7 +653,7 @@
line-height: 90rpx; line-height: 90rpx;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 30rpx; font-size: 28rpx;
border-radius: 50rpx; border-radius: 50rpx;
background: #1367fe; background: #1367fe;
border: 1px solid #1367fe; border: 1px solid #1367fe;

Loading…
Cancel
Save