社区首页 >专栏 >uniapp页面截长图,并非手机自带截图

uniapp页面截长图,并非手机自带截图

原创

英曼畅学

发布于 2023-04-17 17:04:36

2.3K00

代码可运行

文章被收录于专栏：移动端混合平台开发技术分享移动端混合平台开发技术分享

运行总次数：0

代码可运行

手机截图只能获取当前页面可视区域的内容,如果我想将整个页面包括溢出屏幕的保存为图片。

今天的主角html2canvas组件,本文重点分享html2canvas组件的使用,和uniapp的renderjs使用方法。

renderjs官方文档教程https://uniapp.dcloud.net.cn/tutorial/renderjs.html

<template>
	<view>
	　　　<!-- 先给定一个按钮触发页面导出图片的方法,renderScript是下面第二个script标签声明的属性 -->
　　　　　　　<view @click="renderScript.exportPhoto" class="export_btn">导出</view>
		<view class="page" id="poster">
			<!-- 图像信息 -->
			<view style="padding: 20upx 30upx;font-size: 32upx;font-weight: bold;">
				<text style="color: #5297FF;">图像</text>
				<text style="color: #0F1011;">信息</text>
			</view>
			<!-- 图像信息 -->
			<view style="padding: 20upx 30upx;font-size: 32upx;font-weight: bold;">
				<text style="color: #5297FF;">图像</text>
				<text style="color: #0F1011;">信息</text>
			</view>
　　　　　　　　　　　　 ......假设下面有很多内容,超出了屏幕　　　　
		</view>
	</view>
</template>
<!-- 这个script是不能直接操作dom ,需要借助下面renderjs类型的script -->
<script>
　　　　export default {
　　　　　　methods:{
　　　　　　　　　　//通过下面的方法将html转换为图片base64数据回调给此处
　　　　　　　　　　receiveRenderData(data){
			base64ToPath(data, '.jpeg').then(function(imgPath){
　　　　　　　　　　　　　　　　//保存到手机相册,你也可以做其他操作上传到自己服务端等
				uni.saveImageToPhotosAlbum({
					filePath: imgPath,
					success: function() {
						uni.showToast({
							title: '图片保存成功',
							icon: 'none'
						})
　　　　　　　　　　　　　　　　　　　　　　　　uni.hideLoading()
					}
				});
			});
		    },
　　　　　　　　　　openLoading(){
　　　　　　　　　　　　uni.showLoading({
				title:"加载中"
			})
　　　　　　　　　　}
　　　　　　}
　　　　}
</script>
<!-- 不要忘记声明module属性,view中需要通过module声明的调用里面的方法  -->
<script module="renderScript" lang="renderjs">
//引入组件,没有安装的先去安装,怎么安装这里不用多说
import html2canvas from 'html2canvas';
export default {
　　　　methods:{
		exportPhoto(e,ownerVm){
　　　　　　　　　　　　//下面的代码可能会比较耗时,给个加载动画
			ownerVm.callMethod('openLoading')
			var dom = document.querySelector('#poster'); // 获取dom元素
			html2canvas(dom, {
				width: dom.clientWidth, //dom 原始宽度
				height: dom.clientHeight,
				scrollY: 0,
				scrollX: 0,
				useCORS: true, //支持跨域，但好像没什么用
			}).then((canvas) => {
				　// 将生产的canvas转为base64
				　var base64 = canvas.toDataURL('image/png')
　　　　　　　　　　　　　　　　　// 将数据回调给第一个script
				　ownerVm.callMethod('receiveRenderData',base64)
			});
	　　　　}
　　　　}
}
</script>