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/[email protected]" mode=""></image>
							<text>分享到微信</text>
						</button>
						<button class="ly_flex_center_column" @click="saveImg" v-if="canSave">
							<image src="../../static/image/mine/[email protected]" mode=""></image>
							<text>保存到相冊</text>
						</button>
						<button class="ly_flex_center_column" open-type="openSetting" v-if="!canSave">
							<image src="../../static/image/mine/[email protected]" 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>