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

最新推荐文章于 2024-09-05 15:25:14 发布

来自喵星

最新推荐文章于 2024-09-05 15:25:14 发布

阅读量2.2k

点赞数 2

分类专栏： Javascript 文章标签：小程序

本文链接：https://blog.csdn.net/qq_27577113/article/details/119829528

版权

Javascript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了如何使用uniapp的canvas组件结合getImageInfo接口，将网络图片绘制到canvas上，然后通过canvasToTempFilePath方法保存为临时文件，最终调用saveImageToPhotosAlbum保存到本地相册。主要涉及前端开发中的图片处理和本地存储技术。

摘要由CSDN通过智能技术生成

uniapp

<view style="position: fixed;width: 750rpx;height: 100%;z-index: 0;overflow:hidden;">
			<canvas id="myCanvas" 
					canvas-id="myCanvas" 
					canvas-type="2d" 
<!--漂移出屏幕不直接显示到页面上-->
					style="position: absolute;width: 750px;height: 1334px;left: 9999rpx;"></canvas>
		</view>


<view class="ta-c"
					style="width: 260rpx;
							height: 90rpx;
							line-height: 90rpx;
							margin-right:80rpx;
							color: #fff;
							background: linear-gradient(183deg, #FFFFFF 0%, #FFC066 0%, #FF651C 100%);
							border-radius: 45rpx;"
					@click="writeCanvas">
					保存图片
				</view>

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);
		},