uniapp开发h5,把整个页面(包含溢出屏幕)生成截图保存到手机
uniapp开发h5,把整个页面(包含溢出屏幕)生成截图保存到手机
·
项目要求,已完成订单可以生成小票,并且要求小票信息页面要整个保存为一张图片保存到手机
1.首页,在项目中安装:npm install html2canvas ,另外要引入base64
2.在要生成截图的页面中,给要生要成截图的部分定义id名
保存图片事件
在第一个script中
<script>
import {
base64ToPath
} from '@/shopro/poster/QS-SharePoster/image-tools.js';
export default {
data() {
return {
}
},
methods: {
//通过下面的方法将html转换为图片base64数据回调给此处
receiveRenderData(data) {
let that = this;
base64ToPath(data, '.jpeg').then(function(imgPath) {
//保存到手机相册,
// #ifdef H5
uni.downloadFile({
url: imgPath,
success: (res) => {
//创建一个a标签
var link = document.createElement('a');
//把a标签的href属性赋值到生成好了的url
link.href = imgPath;
//通过a标签的download属性修改下载图片的名字
link.download = '小票信息.png';
// link.download = imgPath.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
//让a标签的click函数,直接下载图片
link.click();
uni.hideLoading()
}
})
// #endif
// #ifndef H5
uni.saveImageToPhotosAlbum({
filePath: imgPath,
success: function() {
that.$u.toast(that.$t('index.save_success'));
uni.hideLoading()
},
fail: err => {
console.log(that.$t('index.image_save_failure') + `:`, err);
that.$u.toast(that.$t('index.save_failure'));
}
});
// #endif
})
},
openLoading() {
uni.showLoading({
title: this.$t('index.loading')
})
}
}
}
</script>
第二个script
renderjs官方教程:renderjs | uni-app官网
<!-- 不要忘记声明module属性,view中需要通过module声明的调用里面的方法 -->
<script module="renderScript" lang="renderjs">
//引入组件,没有安装的先去安装,怎么安装这里不用多说
import html2canvas from 'html2canvas';
import {
base64ToPath
} from '@/shopro/poster/QS-SharePoster/image-tools.js';
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)
}).catch((e) => {
console.log(e);
});
}
}
}
</script>
更多推荐
已为社区贡献8条内容
所有评论(0)