main
fanfan 7 months ago
parent 04f36895a9
commit be30ba5f4e
  1. 103
      pages/invite/index.vue

@ -76,11 +76,12 @@
<view class="qrcode">{{userInfo.user_id}}</view>
<view class="tips">
<view class="cancle" @click="download(1)">取消</view>
<view class="sure" @click="download(2)">保存到相册</view>
<view class="sure" @click="download(2)">保存到相册</view>
</view>
</view>
</view>
<canvas id="myCanvas" class="myCanvas" canvas-id="myCanvas" :style="{'width': 702/devicePixelRatio+'px',' height': 1248/devicePixelRatio+'px'}" ></canvas>
<canvas id="myCanvas" class="myCanvas" canvas-id="myCanvas"
:style="{'width': 702/devicePixelRatio+'px',' height': 1248/devicePixelRatio+'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
</view>
</template>
@ -105,7 +106,7 @@
isPopup: false,
info: {},
list: [],
devicePixelRatio: 750/uni.getSystemInfoSync().windowHeight
devicePixelRatio: 750 / uni.getSystemInfoSync().windowHeight
}
},
onReady() {
@ -125,57 +126,67 @@
methods: {
createImge() {
const that = this;
ctx.fillRect(0, 0, 702/that.devicePixelRatio, 1248/that.devicePixelRatio);
ctx.fillRect(0, 0, 702 / that.devicePixelRatio, 1248 / that.devicePixelRatio);
uni.downloadFile({
url: 'https://www.royaum.com.cn/static/3@2x.png',
success(res) {
ctx.drawImage(res.tempFilePath, 0, 0, 702/that.devicePixelRatio, 1248/that.devicePixelRatio);
ctx.drawImage(res.tempFilePath, 0, 0, 702 / that.devicePixelRatio, 1248 / that
.devicePixelRatio);
uni.downloadFile({
url: that.qrcode,
success: (res2) => {
ctx.save(); //
ctx.beginPath(); //
ctx.arc(162/that.devicePixelRatio / 2 + 285/that.devicePixelRatio, 162/that.devicePixelRatio / 2 + 870/that.devicePixelRatio, 162/that.devicePixelRatio / 2, 0, Math.PI * 2, false);
ctx.arc(162 / that.devicePixelRatio / 2 + 285 / that.devicePixelRatio,
162 / that.devicePixelRatio / 2 + 870 / that.devicePixelRatio,
162 / that.devicePixelRatio / 2, 0, Math.PI * 2, false);
ctx.clip();
ctx.drawImage(res2.tempFilePath, 285/that.devicePixelRatio, 870/that.devicePixelRatio, 162/that.devicePixelRatio, 162/that.devicePixelRatio);
//
ctx.restore();
ctx.drawImage(res2.tempFilePath, 285 / that.devicePixelRatio, 870 /
that.devicePixelRatio, 162 / that.devicePixelRatio, 162 / that
.devicePixelRatio);
//
ctx.restore();
//
ctx.setFontSize(45/that.devicePixelRatio);
ctx.setFontSize(45 / that.devicePixelRatio);
ctx.setFillStyle('#cf100d');
ctx.fillText(that.userInfo.user_id, 200/that.devicePixelRatio, 1213/that.devicePixelRatio);
ctx.fillText(that.userInfo.user_id, 200 / that.devicePixelRatio, 1213 /
that.devicePixelRatio);
ctx.draw()
uni.canvasToTempFilePath({
width: 702/that.devicePixelRatio,
height: 1248/that.devicePixelRatio,
destWidth: 702/that.devicePixelRatio,
destHeight: 1248/that.devicePixelRatio,
canvasId: 'myCanvas',
success: function(res) {
// H5tempFilePath base64
console.log(res.tempFilePath)
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(data) {
that.$success('保存成功')
},
fail(err) {
if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
that.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000)
width: 702 / that.devicePixelRatio,
height: 1248 / that.devicePixelRatio,
destWidth: 702 / that.devicePixelRatio,
destHeight: 1248 / that.devicePixelRatio,
canvasId: 'myCanvas',
success: function(res) {
// H5tempFilePath base64
console.log(res.tempFilePath)
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(data) {
that.$success('保存成功')
},
fail(err) {
if (err.errMsg ===
'saveImageToPhotosAlbum:fail auth deny'
) {
that.$toast(
'请允许访问相册后重试 (右上角菜单 - 设置 - 相册)',
3000)
}
}
}
})
}
})
}
})
},
})
}
})
},
//
getCarousel() {
@ -227,15 +238,15 @@
download(type) {
const app = this
app.isPopup = false;
if(type == 1){
return ;
}else{
if (type == 1) {
return;
} else {
uni.showLoading({
title: '加载中'
})
this.createImge();
}
return ;
return;
uni.showLoading({
title: '加载中'
})
@ -339,13 +350,13 @@
background-size: 100% auto;
position: relative;
overflow: hidden;
.myCanvas{
min-height: 100vh;
.myCanvas {
position: absolute;
left: 0;
top: -1200rpx;
z-index: -1;
opacity: 0;
}
&-popup {
width: 100%;
height: 100%;
@ -364,10 +375,12 @@
top: 50%;
margin-top: -635rpx;
z-index: 2;
.bg{
.bg {
width: 620rpx;
height: 1102rpx;
}
.code {
width: 150rpx;
height: 150rpx;
@ -405,13 +418,15 @@
display: flex;
align-items: center;
justify-content: space-between;
.cancle{
.cancle {
flex: 1;
background-color: #FFFFFF;
margin-right: 30rpx;
border-radius: 10rpx;
}
.sure{
.sure {
border-radius: 10rpx;
flex: 1;
color: #FFFFFF;

Loading…
Cancel
Save