前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uniapp页面截长图,并非手机自带截图

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

原创
作者头像
数字凡人
发布2023-04-18 01:04:36
1.9K0
发布2023-04-18 01:04:36
举报

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

今天的主角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>

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档