xiangqin/pages/index/recommend.vue

<template>
	<view>
		<image src="../../static/bg.png" mode="" class="bg"></image>
		 <view class="" style="padding: 30rpx;position: relative;">
		 	<image :src="poster"  style="width: 690rpx;height: 920rpx"></image>
			<image :src="qrcode" mode="" style="width: 120rpx;height: 120rpx;position: absolute;right: 40rpx;bottom: 56rpx;"></image>
		 </view>
		 <view class="" style="margin: 30rpx auto 40rpx;width: 610rpx;" @click="storageImg">
		 	<u-button text="保存图片"  shape="circle" color="linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%)"></u-button>
		 </view>
		 <view class="" style="margin:0 auto;width: 610rpx;">
			 <u-button type="error" :plain="true" openType="share" shape="circle" text="马上邀请好友"></u-button>
		 	
		 </view>
		 <canvas canvas-id="shareCanvas" style="width: 690px;height: 920px;position: fixed;top: -1000px;left: 1000px;z-index: 99;"></canvas>
	</view>
</template>

<script>
	export default {
		onLoad() {
				this.getInfo()
		},
		data() {
			return {
				poster:'',
				qrcode:'',
				canvas: null,
			}
		},
		methods: {
			storageImg(){
					
					this.drawCanvas()
			},
			// 封装的下载图片函数
			    downLoadImage(url) {
			      return new Promise((resolve, reject) => {
			        wx.getImageInfo({
			          src: url,
			          success(res) {
			            resolve(res.path)
			          },
			          fail(err) {
			            reject(err)
			          },
			          complete() {
			            console.log('complete')
			          }
			        })
			      })
			    },
				drawCircular(ctx,width, height, x, y, url) {
				  var avatarurl_width = width;
				  var avatarurl_heigth = height;
				  var avatarurl_x = x;
				  var avatarurl_y = y;
				  ctx.save();
				  ctx.beginPath();
				  ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
				  ctx.clip();
				  ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
				  ctx.restore();
				},
				//第一个参数：创建的画布对象
				//第二个参数：矩形的宽
				//第三个参数：矩形的高
				//第四个参数：矩形左上角x轴坐标点，
				//第五个参数：矩形左上角y轴坐标点，
				//第六个参数：绘制的图片的URL
			drawCanvas(){
				uni.showLoading({
					
				})
				var that=this
					      let ctx = wx.createCanvasContext('shareCanvas', this)
						  let productImage = this.downLoadImage(this.poster);
						  let erCodeImage = this.downLoadImage(this.qrcode);
					      Promise.all([productImage, erCodeImage]).then(imgs => {
					        console.log('imgs', imgs)
					        // 全部图片下载成功
					        let bgWidth = 690;
					        let bgHeight = 920;
					        // 绘制白底背景
					        ctx.setFillStyle('#fff')
					        ctx.fillRect(0, 0, bgWidth, bgHeight)
					        console.log('全部图片下载成功')
					       
					        // 绘制产品图片
					        let productOffLeft = 0;
					        let productOffTop = 0;
					        let productWidth = 690;
					        let productHeight = 920;
					        ctx.drawImage(imgs[0], productOffLeft, productOffTop, productWidth, productHeight)
					        
					        console.log('imgs', imgs[2])
					        ctx.drawImage(imgs[1], 530 , 780, 120, 120),
							
					        ctx.draw(true, () => {
					          wx.hideLoading();
					          // wx.showLoading({
					          //   title: '保存中',
					          //   icon: 'none'
					          // })
					          let _this = this;
					          wx.canvasToTempFilePath({
					            x: 0,
					            y: 0,
					            canvasId: 'shareCanvas',
					            quality: 1.0,
					            fileType: 'jpg',
					            success(res) {
					              console.log('生成图片成功')
					              console.log('res', res.tempFilePath)
								  that.saveImage(res.tempFilePath)
					              wx.hideLoading()
					            },
					            fail(err) {
					              console.log('err', err)
					              wx.showToast({
					                title: '图片生成失败',
					                icon: 'none',
					              })
					            },
					            complete() {
					              
					            }
					          }, _this)
					        })
					      }).catch(err => {
					        console.log(err)
					      })
					    },
					    
					    // 保存图片
					    saveImage(url) {
					      let _this = this;
					      // let tempFilePath = this.data.tempFilePath;
					      if (!url) {
					        wx.showToast({
					          title: '图片生成失败',
					          icon: 'none',
					        })
					        return;
					      }
					      wx.saveImageToPhotosAlbum({
					        filePath: url,
					        success() {
								_this.showShare=false
					          wx.showToast({
					            title: '已保存到相册，您可将图片分享到朋友圈',
					            icon: 'none'
					          })
					        },
					        fail() {
					          wx.showToast({
					            title: '图片保存失败',
					            icon: 'none',
					          })
					        },
					        complete() {
					          // wx.hideLoading();
					        }
					      })
			},
			getInfo(){
				uni.$u.http.post('/api/Publics/config_info').then(res => {
					if(res.code==1){
						this.poster=res.data.poster
						this.qrcode=res.data.applet_code
					}
				})
			}
		}
	}
</script>

<style>
page{
	padding-bottom: 50rpx;
}
</style>