项目要求,已完成订单可以生成小票,并且要求小票信息页面要整个保存为一张图片保存到手机

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>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐