uniapp 微信小程序绘制canvas,保存canvas为图片到手机/本地

uniapp


			
					style="position: absolute;width: 750px;height: 1334px;left: 9999rpx;">
		



					保存图片
				

 js

writeCanvas(){
			var that = this;
			new Promise(function(resp,rej){
				uni.getImageInfo({
					src: that.imageUrl,//这里是一张网络图片
					success: (response) => {
						console.log("response=",response)
						resp(response)
					},
				})
			}).then(function(data){
				//myCanvas
				const ctx = wx.createCanvasContext('myCanvas')
				ctx.drawImage(data.path, 0, 0)//将获取到的网络图片的临时图片画到屏幕中
				ctx.draw()
				console.log("draw over")
				that.saveImgToLocal();
			}).catch(function(data){
				console.log("catch",data)
			});
		},
		//保存页面中的myCanvas到本地相册
		saveImgToLocal(){
			//将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
			setTimeout(function() {
				wx.canvasToTempFilePath({
					canvasId: 'myCanvas',
					success: function(res) {
						console.log("save ok canvasToTempFilePath",res)
						var tempFilePath = res.tempFilePath;
						wx.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success(res) {
								console.log('saveImageToPhotosAlbum', res);
								wx.showToast({
									title: '已保存到相册',
									icon: 'success',
									duration: 2000
								})
							}
						})
					},
					fail: function(res) {
						console.log(res);
					}
				});
			}, 500);
		},

你可能感兴趣的:(Javascript,小程序)