uniapp H5将当前页面生成为海报 长按保存图片

最近H5项目中，有个生成海报并分享的功能，但是发现uniapp官方的保存图片的API，居然不支持H5

在后续研究其他方法时发现了html2canvas第三方插件

使用方法如下：

1.通过npm或yarn命令安装

npm： npm i html2canvas

yarn：yarn add html2canvas

2.在需要的页面上引入

import html2canvas from 'html2canvas';

3.html代码如下

	<view>
		<!-- <u-toast ref="uToast" /> -->
		<view style="height: 100vh;" id="canvasImg" v-if="!screenshot">
			<view class="banner">
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular :autoplay="true" :interval="3000">
						<swiper-item v-for="(item,index) in list" :key="index">
							<image :src="item.img" mode="scaleToFill" style="height: 100%; width: 100%;"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="qrcode">
				<view class="left">
					{{usercode.nickname}}
					<text>电话: {{usercode.phone}}</text>
					<button @click="transImage" size="mini">长按保存海报</button>
				</view>
				<image :src="'http://192.168.0.99:8083'+usercode.qrCode" mode="aspectFill"></image>
			</view>
		</view>
		<view v-else>
			<image :src="screenshot" mode="widthFix" style="width: 100%;"></image>
		</view>
	</view>
</template>

在使用过程中发现上述代码在微信浏览器中可正常使用，但是在普通浏览器中无法触发长按保存事件，需要将：

	<view v-else>
		<image :src="screenshot" mode="widthFix" style="width: 100%;"></image>
	</view>

替换为：

	<canvas style="width: 100vw;height: 100vh;" class="content-showMakeImg-canvas" v-else>
		<img :src="screenshot" alt="" style="width: 100vw;height: 100vh;" />
	</canvas>

js代码：

	transImage() {
		uni.showLoading({
			title: '生成海报中'
		});
		//点击保存按钮的回调事件
		const element = document.getElementById('canvasImg'); // 需要导出的dom元素
		html2canvas(element, {
			allowTaint: true,
			useCORS: true
		}).then((canvas) => {
			// imgUrl 是图片的 base64格式 代码 png 格式
			const imgUrl = canvas.toDataURL('image/png');
			this.screenshot = imgUrl;
			//下载图片的功能。
			this.downloadIamge(imgUrl, 'canvasImage.png');
			uni.hideLoading();
		});
	// }
	},
	downloadIamge(base64Url) {
		let imgUrl = base64Url;
		if (window.navigator.msSaveOrOpenBlob) { //兼容IE浏览器的写法
			let imageStr = atob(imgUrl.split(",")[1]);
			let n = imageStr.length;
			let u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = imageStr.charCodeAt(n);
			}
			let blob = new Blob([u8arr]);
			window.navigator.msSaveOrOpenBlob(blob, "chart-download" + "." + "png");
		} else { //非IE浏览器
			let a = document.createElement("a");
			a.href = imgUrl;
			a.setAttribute("download", "chart-download");
		}
	},

根据触发场景不同transImage事件可绑定为点击事件 我这边是放在onReady生命周期中调用

	onReady() {
		this.transImage()
	}

以上就实现了在uniapp H5项目中将当前页面生成为海报 长按保存图片功能

原文链接：https://juejin.cn/post/7352555529104490548 作者：梦梦炖大鹅