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

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

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

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

代码语言:javascript
复制
<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>

欢迎访问本人个人简介中的网站地址,后面会持续分享移动端混合开发技术,大家也可以一起评论区交流