微信小程序将页面保存为图片

我丢个炸弹

于 2025-01-16 16:10:12 发布

阅读量951

点赞数 12

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/m0_67019637/article/details/145185023

版权

文档地址：snapshot | 微信开放文档

1.根目录manifest.json文件，打开源码视图，找到mp-weixin，添加如下配置

配置含义参考文档链接：全局配置 | 微信开放文档

       "lazyCodeLoading": "requiredComponents",
		"rendererOptions": {
			"skyline": {
				"defaultDisplayBlock": true,
				"disableABTest": true,
				"sdkVersionBegin": "3.0.1",
				"sdkVersionEnd": "15.255.255"
			}
		},
		"componentFramework": "glass-easel"

2.找到根目录下的pages.json文件，在需要截图的页面下配置"renderer": "skyline",navigationStyle设置为custom，后续页面的导航栏可以采用uniapp组件自定义

3.页面

注意：官网是建议snapshot下包裹scroll-view，试了不咋行，我这里长截图采用的是scroll-view包裹snapshot，snapshot组件背景要设置为白色，不然截图出来会是全黑的图

4.微信开发者详情设置中开启skyline设置，就可以保存截图了

5.截图

takeScreenshotFn() {
			this.createSelectorQuery()
				.select('#target')
				.node()
				.exec((res) => {
					const node = res[0].node;
					console.log(node, 'node');
					node.takeSnapshot({
						type: 'arraybuffer',
						format: 'png',
						success: (res) => {
							console.log(res, 'resres');
							const f = `${wx.env.USER_DATA_PATH}/reportDetail.png`;//照着写
							console.log(f, '路径');
							const fs = uni.getFileSystemManager();
							fs.writeFileSync(f, res.data, 'binary');

							uni.saveImageToPhotosAlbum({
								filePath: f,
								success(res) {
									uni.showToast({
										title: '保存图片成功',
										icon: 'none',
										duration: 2000
									});
									console.log('saveImageToPhotosAlbum:', res);
								},
								fail(err) {
									uni.showToast({
										title: '保存图片失败',
										icon: 'none',
										duration: 2000
									});
									console.error('保存失败', err);
								}
							});
						},
						fail(err) {
							console.log(err);
							uni.showToast({
								title: '图片转换失败',
								icon: 'none',
								duration: 2000
							});
						}
					});
				});
		},

注意事项：开启skyline模式后，defaultDisplayBlock设置会导致元素默认水平排列，可以根据需要设置设置，display:flex,flex-direction: column;

文档链接：Skyline 渲染引擎 / 支持与差异 / WXSS 样式 | 微信开放文档