canvas生成图片分享并保存相册【uniapp开发小程序项目】

canvas生成图片分享并保存相册

具体步骤描述：

添加画布

首先，在小程序里进行绘图操作需要用到组件，那我们就先在我们的wxml代码中放入<canvas>，然后，我们要开始写JS代码在这张画布上进行绘图操作。
代码如下：

html代码：

<template>
	<view class="mine">
	<!-- //广告    触发分享打开分享弹窗，开始生成图片-->
		<view class="mBot_ad">
			<image src="../../static/image/mine/m_yq.png" mode="" @click="showShare()"></image>
		</view>
<!-- //弹出分享 -->
		<view class="shareMask" v-if="showMask" @tap="showMask=false" catchtouchmove='true' >
			<view class="s_box">
				<view @click.stop="">
					<canvas disable-scroll="true" canvas-id="share_qr_code" id="share_qr" style="width:580rpx;height:800rpx;border-radius: 32rpx;"></canvas>
					<view class="btn_box ly-flex-center-around">
						
						<button class="ly_flex_center_column" open-type="share">
							<image src="../../static/image/mine/wx@2x.png" mode=""></image>
							<text>分享到微信</text>
						</button>
						<button class="ly_flex_center_column" @click="saveImg" v-if="canSave">
							<image src="../../static/image/mine/xc@2x.png" mode=""></image>
							<text>保存到相册</text>
						</button>
						<button class="ly_flex_center_column" open-type="openSetting" v-if="!canSave">
							<image src="../../static/image/mine/xc@2x.png" mode=""></image>
							<text>保存到相册</text>
						</button>
					</view>
				</view>
			</view>
		</view> 
	</view>
</template>

js代码：

<script>
	export default {
		data() {
			return {
				showMask:false,//是否显示share
				datas:{},//个人信息
				selfInfo:false,//是否有个人头像信息
				shareQrImg:'',//个人分享的图片
				qrImg:"",//base64图片，从后台获取二维码
				drawHeadImg:"../../static/image/mine/m_head.png",//默认绘画的head，如果有就获取
				authToken:null,
				canSave:true,//是否可以保存图片
			}
		},
		methods: {
			showShare(){
				let __that = this;
				this.showMask=true;
				this.$nextTick(function(){
					__that.drawShareImg();
				})
			},
			//绘制个人分享图片
			drawShareImg(){
				let __that = this;
				const share_qr = uni.createSelectorQuery().select('#share_qr');
				share_qr.boundingClientRect((data)=>{
					console.log(data)
				//uni.getSystemInfo({success:function(data){	
					const defWidth = 580;
					const defHeight = 800; 
					// const win_height = data.windowHeight;
					// const win_width = data.windowWidth;
					const win_height = data.height;
					const win_width = data.width;
					const ctx = uni.createCanvasContext('share_qr_code');
					//填充白色背景
					ctx.setFillStyle('#FFFFFF');
					ctx.fillRect(0, 0, win_width, win_height)
					//设置圆角
					//const x=0,y=0,w=win_width,h=win_height,r=5;
					// ctx.save()
					//ctx.beginPath();
					//ctx.setFillStyle("#FFFFFF"); 
					//ctx.setStrokeStyle('#FFFFFF')
					//ctx.setLineJoin('round');  //交点设置成圆角
					//ctx.setLineWidth(r);
					//ctx.strokeRect(x + r/2, y + r/2, w - r , h - r );
					//ctx.fillRect(x + r, y + r, w - r * 2, h - r * 2);
					// ctx.stroke()
				    //ctx.closePath();
					//画头像
					const m_head_weight = Math.floor(100*win_width/defWidth);
					const m_head_left = Math.floor(238*win_width/defWidth);
					const m_head_top = Math.floor(34*win_height/defHeight);
					ctx.save()
					ctx.beginPath()
					ctx.arc(m_head_left+(m_head_weight/2), m_head_top+(m_head_weight/2), m_head_weight/2, 0, 2 * Math.PI)
					ctx.clip()
					ctx.drawImage(__that.drawHeadImg,m_head_left,m_head_top,m_head_weight,m_head_weight);
					ctx.restore()
					//画文字 
					const font1_left = Math.floor(win_width/2); 
					const font1_top = Math.floor(161*win_height/defWidth); 
					ctx.setFontSize(15)
					ctx.setFillStyle('#333333')
					ctx.setTextAlign('center')
					ctx.fillText('扫码免费获得优惠券',font1_left,font1_top);
					//画二维码
					const qr_weight = Math.floor(500*win_width/defWidth);
					const qr_left = Math.floor(38*win_width/defWidth);
					const qr_top = Math.floor(251*win_height/defHeight); 
					// const fsm = uni.getFileSystemManager();
					
					ctx.drawImage(__that.qrImg,qr_left,qr_top,qr_weight,qr_weight)
					// ctx.drawImage('../../static/image/mine/qr_code.png',qr_left,qr_top,qr_weight,qr_weight)
					//保存图片到相册【此处可直接选择画好既保存】
					// ctx.draw(false,function(){
					// 	uni.canvasToTempFilePath({canvasId:'share_qr_code',success(res){
					// 		__that.shareQrImg = res.tempFilePath  //h5平台中是base64图片 
					// 		uni.saveImageToPhotosAlbum({
					// 			filePath:res.tempFilePath,
					// 			success() {
					// 				console.log("success");
					// 			}
					// 		})
					// 	}}); 
					// })
					// 【也可仅画出图片即可】
					ctx.draw()
				//}})
				}).exec();
			},
			// 分享彈窗的保存图片
			saveImg(){
				console.log('保存圖片');
				let __that = this;
				uni.canvasToTempFilePath({canvasId:'share_qr_code',success(res){
					console.log(res.tempFilePath)
					__that.shareQrImg = res.tempFilePath  //h5平台中是base64图片 
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success() {
							__that.$tips.toast("保存成功")
							console.log("success");
						},
						fail(rej){
							//如果拒绝,让保存图片按钮变成打开设置的
							__that.canSave = false
							console.log("fail",rej);
						}
					})
				}}); 
			}，
		onShareAppMessage (res) {
			console.log(res)
		    if (res.from === 'button') {
		      // 来自页面内转发按钮
		      console.log('转发按钮')
		      console.log(res.target)
		    }
			let __that = this;
			uni.canvasToTempFilePath({canvasId:'share_qr_code',success(res){
				console.log(res.tempFilePath)
				__that.shareQrImg = res.tempFilePath  //h5平台中是base64图片 
			}}); 
		    return {
		      title: '嗨~快來找我呀，等你哦~',
		      path: 'pages/index/index?id=123',
			  imageUrl: __that.shareQrImg
		    }
		}
	}
</script>