移动设备及对于浏览器对H5的大力支持，canvas在越来越多的场景中被应用。如常见的分享海报，动态分享图片信息等。

文中介绍基于canvas生成的效果，点击进行保存成图片到本地相册中代码流程。

一、template中代码

<canvas  :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="my-canvas"></canvas>
<view class="save-btn" @click.stop="saveImage">保存图片</view>

注：canvas必须设置宽高

二、保存canvas方法调用

saveImage(){
	//判断用户授权
	uni.getSetting({
	   success(res) {
		  console.log('获取用户权限',res.authSetting)
		  if(Object.keys(res.authSetting).length>0){
			  //判断是否有相册权限
			  if(res.authSetting['scope.writePhotosAlbum']==undefined){
				  //打开设置权限
				  uni.openSetting({
					success(res) {
					  console.log('设置权限',res.authSetting)
					}
				  })
			  }else{
				  if(!res.authSetting['scope.writePhotosAlbum']){
					  //打开设置权限
					  uni.openSetting({
						success(res) {
						  console.log('设置权限',res.authSetting)
						}
					  })
				  }
			  }
		  }else{
			  return
		  }
	   }
	})
	var that = this
	uni.canvasToTempFilePath({
		canvasId: 'my-canvas',
		quality: 1,
		complete: (res) => {
			console.log('保存到相册',res);
			uni.saveImageToPhotosAlbum({
				filePath: res.tempFilePath,
				success(res) {
					uni.showToast({
						title: '已保存到相册',
						icon: 'success',
						duration: 2000
					})
				}
			})
		}
	},this);
}

三、代码解析

    3.1、保存前先使用uni.getSetting检测用户是否对保存到相册进行授权

    3.2、如果未授权调用uni.openSetting进行授权操作

    3.3、已授权状态下，调用uni.canvasToTempFilePath配置canvasId后，使用uni.saveImageToPhotosAlbum进行保存到相册。

注：如果用户未授权，则不能保存。必须用户授权才可以。