uniapp-APP环境下截屏或整个页面生成图片

原创

已于 2023-11-15 17:24:05 修改 · 5.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2023-11-15 17:22:04 首次发布

文章介绍了如何在uniapp开发的小程序中实现内嵌APP环境下的屏幕截图功能，以及使用html2canvas库生成整个页面的图片。开发者展示了截屏和整页生成图片的代码片段，涉及依赖安装和方法实现。

该文章已生成可运行项目，

我开发的是内嵌原生app的uniapp小程序，运行在APP环境下（行不行的放代码里试一下）

1、截屏

const capture = () => {
		let _this = this
		var pages = getCurrentPages();
		var page = pages[pages.length - 1];
		console.log("当前页" + pages.length - 1);
		var bitmap = null;
		var currentWebview = page.$getAppWebview();

		// #ifdef APP-PLUS
		bitmap = new plus.nativeObj.Bitmap('amway_img');
		// 将webview内容绘制到Bitmap对象中  
		currentWebview.draw(bitmap, function() {
			console.log('截屏绘制图片成功');
			bitmap.save("_doc/a.jpg", {}, function(i) {
				console.log('保存图片成功：' + JSON.stringify(i));
				pageImage.value = i.target
				let imageList=[]
				imageList.push(pageImage.value)
				//图片预览
				// uni.previewImage({
				// 	urls: imageList // 需要预览的图片http链接列表
				// })
			}, function(e) {
				console.log('保存图片失败：' + JSON.stringify(e));
			});
		}, function(e) {
			console.log('截屏绘制图片失败：' + JSON.stringify(e));
		});
		// #endif
	}