uniapp app端 生成图片并保存到手机相册

一.npm 安装 html2canvas和image-tools插件

npm install --save html2canvas
npm i image-tools --save

二.使用

注：uniapp app端 由于没有document，不能进行相关的DOM操作，可用官方推出了renderjs来解决问题。renderjs | uni-app官网

<template>
	<view>
		<view id="canvasImg">
			<table>
				<tr v-for="(item , index) in dataList" :key="index">
					<td>{{item.name}}</td>
					<td>{{item.age}}</td>
					<td>{{item.sex}}</td>
				</tr>
			</table>
		</view>
		<view>
			<button style="width: 200upx;" @click="canvas.downImg">保存</button>
		</view>
	</view>
</template>
<script module="canvas" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {}
		},
		methods: {
			downImg(e, ownerVm) {
				window.scrollTo(0, 0) //注意这里必须设置为顶部不然会出现图片不全
				html2canvas(document.querySelector('#canvasImg'), {
					allowTaint: true, //是否允许跨域图像渲染画布
					useCORS: true, //是否尝试使用 CORS 从服务器加载图像 解决图片跨域问题
				}).then(function(canvas) {
					ownerVm.callMethod('receive', canvas.toDataURL('image/jpeg', 1.0))
				}).catch(err => {
					ownerVm.callMethod('showToast', `生成图片失败，请重试,${err}`)
				})
			},
		}
	}
</script>
<script>
	import {
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				dataList: [{
						name: '张三',
						sex: '男',
						age: 19
					},
					{
						name: '张四',
						sex: '男',
						age: 19
					},
					{
						name: '张五',
						sex: '男',
						age: 19
					}
				],
				imgUrl: '',
			}
		},
		methods: {
			//提示
			showToast(content) {
				uni.showToast({
					title: content,
					icon: 'none',
					duration: 2000,
				});
			},
		
			// 将base64位的图片路径转换为临时路径
			receive(val) {
				//去除base64位中的空格
				this.imgUrl= val.replace(/[\r\n]/g, ''); 
				//将base64位的图片路径转换为临时路径
				setTimeout(() => {
					const url= this.imgUrl;
					base64ToPath(url).then(path => {
							this.saveImage(path)
						})
						.catch(error => {
							console.error('图片的临时路径转换出错了：', error);
						});
				}, 500);
			},
			// 保存图片到手机相册
			saveImage(path) {
				uni.saveImageToPhotosAlbum({
					path, // 需要临时文件路径，否则base64无法保存
					success: () => {
						this.showToast('保存图片到本地相册成功')
					},
					fail: () => {
						this.showToast('保存图片到本地相册失败')
					}
				});
			},

		},
	}
</script>