<template>
<view class="poster_box">
<!-- 显示的页面 -->
<view class="myShare" >
<image class="my_img" :src="app+'/yaoqing/bj.png'" mode=""></image>
<view class="er_box">
<image class="er" :src="er" mode=""></image>
</view>
<view class="zi">邀请好友领积分</view>
<view class="font">
<view class="font_info">
<button class="share" open-type="share">
<image :src="app+'/yaoqing/weixin.png'" mode=""></image>
<view>微信好友</view>
</button>
</view>
<view class="font_info" v-if="writePhotosAlbum==false">
<button class="share" open-type="openSetting">
<image :src="app+'/yaoqing/img.png'" mode=""></image>
<view>保存图片</view>
</button>
</view>
<view class="font_info" @tap="saveImage" v-else>
<image :src="app+'/yaoqing/img.png'" mode=""></image>
<view>保存图片</view>
</view>
</view>
</view>
<!-- 下面这个图片是参考位置,真正用隐藏*********************************************************** -->
<image v-if="true" style="width: 100vw;display: none;" mode="widthFix" :src="imgurl"></image>
<canvas canvas-id="mycanvas" style="width: 750px;height: 1206px;border: 1px solid red;position:absolute;left: -5000px;"></canvas>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
app: getApp().globalData.peiImg,
result: '', //生成海报的url
er: '',
imgurl: '',
canvasShow: true,
canvasercode: '',
bj: '',
writePhotosAlbum: undefined
};
},
onShow() {
let that = this;
uni.getSetting({
success: res => {
this.writePhotosAlbum = res.authSetting["scope.writePhotosAlbum"];
console.log(this.writePhotosAlbum,"11111111111111")
}
})
},
onLoad() {
/* 二维码接口 */
/* 邀请 */
let that = this;
let url = '/api/user/userImage';
let data = {
token: uni.getStorageSync('userInfo').token
};
this.$request.post(url, data).then(res => {
that.er = res.data.file;
console.log('获取的er' + that.er);
that.downfile(this.er);
});
},
onShareAppMessage: function() {
return {
title: '邀请好友领积分',
imageUrl: this.imgurl, //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。
path: '/pages/index/index',
success: function(res) {
console.log(res);
}
};
},
onHide() {
uni.removeStorageSync('person-card');
},
mounted() {
if (uni.getStorageSync('person-card')) {
this.canvasShow = false;
this.imgurl = uni.getStorageSync('person-card');
} else {
// this.canvasImage();
}
},
methods: {
//网路图片先下载再绘制
downfile(e) {
let that = this;
uni.downloadFile({
url: e, //仅为示例,并非真实的资源
success: res => {
if (res.statusCode === 200) {
console.log('下载成功');
that.canvasercode = res.tempFilePath;
console.log(that.canvasercode);
that.canvasImage();
}
}
});
},
canvasImage() {
console.log('绘制');
let myCanvas = uni.createCanvasContext('mycanvas', this);
// 绘制背景
myCanvas.drawImage('../../static/pei/yaoqing/bj.png', 0, 0, 750, 1260);
//*******************************************************设置二维码大小就好了位置
myCanvas.drawImage(this.canvasercode, 185, 420, 375, 375);
let fontSize = 70;
myCanvas.font = `bold ${fontSize}px Arial`;
myCanvas.fillStyle = '#ff4d30'; //填充线样式
myCanvas.fillText('邀请好友领积分', 130, 250);
myCanvas.draw(true, () => {
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
success: res => {
///************************************************有个保存图片到本地的方法
this.imgurl = res.tempFilePath;
this.canvasShow = false;
uni.hideLoading();
uni.setStorageSync('person-card', this.imgurl);
},
fail: () => {
uni.showToast({
title: '名片加载失败',
duration: 2000
});
}
});
});
},
saveImage() {
console.log(123)
uni.saveImageToPhotosAlbum({
filePath: this.imgurl,
success: () => {
uni.showToast({
title: '保存成功',
duration: 2000
});
},
fail: () => {
uni.showToast({
title: '保存失败',
duration: 2000,
icon: "none"
});
}
});
return
uni.showActionSheet({
itemList: ['保存图片', '取消'],
success: res => {
if (res.tapIndex == 0) {
}
},
fail: function(res) {
console.log(res.errMsg);
}
});
}
}
};
</script>
<style lang="scss" scoped>
.poster_box {
width: 100vw;
height: 100vh;
background-color: #fef8e8;
}
/* 去除点button的默认样式 */
.share {
background-color: rgba(0, 0, 0, 0);
padding: 0;
color: #ffffff;
font-size: 32upx;
line-height: 1.4;
}
.share::after {
border: none;
}
.myShare {
width: 100vw;
height: 1200upx;
position: fixed;
bottom: 0;
left: 0;
.zi {
color: #ff4d30;
font-size: 70upx;
font-weight: bold;
position: absolute;
top: 13%;
width: 750upx;
text-align: center;
left: 0;
z-index: 666;
letter-spacing: 2px;
}
.my_img {
width: 750upx;
height: 1200upx;
position: absolute;
left: 0;
right: 0;
z-index: 1;
}
.er_box {
position: absolute;
z-index: 99;
top: 35.7%;
left: 24.7%;
display: flex;
justify-content: center;
align-items: center;
width: 375rpx;
height: 375rpx;
background-color: #FFFFFF;
}
.er {
width: 345rpx;
height: 345rpx;
}
.font {
position: absolute;
left: 0;
bottom: 90upx;
font-size: 32upx;
color: #ffffff;
z-index: 66;
width: 100vw;
height: 250upx;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
.font_info {
width: 225upx;
height: 160upx;
}
image {
width: 100upx;
height: 100upx;
}
}
}
</style>
uniApp小程序保存图片canvas
最新推荐文章于 2024-04-17 15:03:07 发布