uniApp截屏并保存相册

最新推荐文章于 2025-09-08 16:29:16 发布

原创最新推荐文章于 2025-09-08 16:29:16 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

uniApp 专栏收录该内容

12 篇文章

订阅专栏

该段代码展示了在非H5环境下，如何使用小程序进行页面截屏，并将截图保存到手机相册的过程。首先，它隐藏分享按钮，然后设定延迟执行，通过`getCurrentPages()`获取当前页面，创建`Bitmap`对象，将Web内容绘制到Bitmap，保存为图片文件，最后调用`uni.saveImageToPhotosAlbum()`保存图片到相册，并显示提示信息。

shareBtn() {
	let that = this
	this.show = false
	setTimeout(()=>{
		//#ifndef H5
		var pages = getCurrentPages();
		var page = pages[pages.length - 1];
		var bitmap = null;
		var currentWebview = page.$getAppWebview();
		bitmap = new plus.nativeObj.Bitmap('amway_img');
		// 将web内容绘制到Bitmap对象中
		currentWebview.draw(
			bitmap,
			function() {
				bitmap.save(
					'_doc/a.jpg', {},
					function(i) {
						uni.saveImageToPhotosAlbum({
							filePath: i.target,
							success: function() {
								bitmap.clear();
								uni.showToast({
									title: '保存图片成功',
									icon:'none',
									mask: false,
									duration: 1500
								});
								that.show = true
							}
						});
					},
					function(e) {
						that.show = true
						// console.log('保存失败', + JSON.stringify(e))
					}
				);
			},
			function(e) {
				that.show = true
				// console.log('截屏失败', JSON.stringify(e))
			}
		);
		//#endif
	},500)
}

Tips：不支持小程序端。