手机截图只能获取当前页面可视区域的内容,如果我想将整个页面包括溢出屏幕的保存为图片。
今天的主角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>欢迎访问本人个人简介中的网站地址,后面会持续分享移动端混合开发技术,大家也可以一起评论区交流
