当前位置:首页 > uni-app > 正文内容

uniapp中生成海报,直接把页面截图保存到手机

陈杰2个月前 (09-24)uni-app547

在项目中有一个分享二维码的功能,用户生成一个二维码,然后截图保存分享出去。本来智商正常的人都知道怎么截图吧,但是客户说太复杂了,总有些笨蛋不会,要直接点一下就能保存到相册。

那怎么说呢?客户是上帝,客户是衣食父母,来想办法解决一下吧。


对于一个php程序员来说,前端毕竟不够专业,首先想到的就是百度一下,看了一下基本上都是利用canvas画图,矩阵,啥啥啥的,看到头都大,有没有什么办法可以直接把页面截图保存下来呢?

因为之前在h5端做过,

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

当时用到了

html2canvas

这个插件,那么对于功能更高级的uniapp没道理不能实现吧?


直接上代码吧

<template>
	<view>
		<view @click="capture()">

			<view class="qrcode">

				<image v-if="img" style="width: 200px;height: 200px;" :src="img" mode="scaleToFill"></image>
				<uqrcode v-else style="display: flex;justify-content: center;align-items: center;" ref="uqrcode">
				</uqrcode>
				<view style="margin-top: 20rpx;">微信扫二维码在浏览器打开</view>
			</view>
			<image :src="$request.config.qiniu.share_img" mode="scaleToFill" class="bg">

			</image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is: true,
				img: '',
				$request: this.$request
			}
		},
		onReady() {
			this.$refs.uqrcode.make({
					size: 200,
					text: this.$request.baseUrl + "i?id=" + this.$request.uid
				})
				.then(res => {
					// 返回的res与uni.canvasToTempFilePath返回一致
					console.log(res)
					this.img = res.tempFilePath
				})
		},
		methods: {
			capture() {
				this.$nextTick(function() {
					var pages = getCurrentPages(); //获取当前页面信息
					console.log(pages);
					var page = pages[pages.length - 1];
					var bitmap = null;
					var currentWebview = page.$getAppWebview();
					bitmap = new plus.nativeObj.Bitmap('amway_img');
					let t = this
					currentWebview.draw(bitmap, function() {
						let rand = Math.floor(Math.random() * 10000)
						let saveUrl = '_doc/' + rand + 'a.jpg'
						bitmap.save(saveUrl, {}, function(i) {
							uni.showModal({
								title: "是否保存图片到手机?",
								success: (confirm) => {
									if (confirm.confirm) {
										uni.saveImageToPhotosAlbum({
											filePath: i.target,
											success: function() {
												bitmap
													.clear(); //销毁Bitmap图片
												uni.showToast({
													title: '保存图片成功',
													mask: false,
													duration: 1500
												});
											}
										});
									} else {
										bitmap.clear(); //销毁Bitmap图片
									}
								}
							})



						}, function(e) {
							t.showToast("保存图片失败")

						});
					}, function(e) {
						t.showToast("截屏绘制图片失败")
					});
				})
			},

		}
	}
</script>

<style scoped>
	.qrcode {
		width: 100%;
		/* height: 260px; */
		position: absolute;
		top: 30%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.bg {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
</style>



分析一下代码,这里我们用到了一个生成二维码的插件,这类插件很多我们就不具体分析了,主要分析保存页面为图片并保存到相册的功能

capture() {
				this.$nextTick(function() {
					var pages = getCurrentPages(); //获取当前页面信息
					console.log(pages);
					var page = pages[pages.length - 1];
					var bitmap = null;
					var currentWebview = page.$getAppWebview();
					bitmap = new plus.nativeObj.Bitmap('amway_img');
					let t = this
					currentWebview.draw(bitmap, function() {
						let rand = Math.floor(Math.random() * 10000)
						let saveUrl = '_doc/' + rand + 'a.jpg'
						bitmap.save(saveUrl, {}, function(i) {
							uni.showModal({
								title: "是否保存图片到手机?",
								success: (confirm) => {
									if (confirm.confirm) {
										uni.saveImageToPhotosAlbum({
											filePath: i.target,
											success: function() {
												bitmap
													.clear(); //销毁Bitmap图片
												uni.showToast({
													title: '保存图片成功',
													mask: false,
													duration: 1500
												});
											}
										});
									} else {
										bitmap.clear(); //销毁Bitmap图片
									}
								}
							})



						}, function(e) {
							t.showToast("保存图片失败")

						});
					}, function(e) {
						t.showToast("截屏绘制图片失败")
					});
				})
			},

主要用到的就是plus.nativeObj.Bitmap的原生功能。


这里有一个坑我得说一下,注意看

<image v-if="img" style="width: 200px;height: 200px;" :src="img" mode="scaleToFill"></image>
				<uqrcode v-else style="display: flex;justify-content: center;align-items: center;" ref="uqrcode">
				</uqrcode>


我这里用到了一个v-if="img"

为什么,因为这个二维码是通过canvas画出来的,在测试中发现,ios中可以被保存到相册,在安卓中就是,页面中的其他内容都被截图下来了,但是二维码不见了。。。。。


奇了个怪了,那就应该是在安卓中的plus.nativeObj.Bitmap 不支持截图canvas画出来的东西,那么就想一个办法,我生成的二维码不是还有一个Base64格式吗?


那么我生成出来了base64然后再给img填充一下不就行了,试了一下果然可以。

虽然那个二维码会闪一下,不过不影响了。

image.png

扫描二维码至手机访问

扫描二维码推送至手机访问。

版权声明:本文由何烦过虎溪发布,如需转载请注明出处。

转载请注明出处:http://95shouyou.com/?id=45

分享给朋友:
返回列表

上一篇:uniapp中的unipush中遇到的坑

没有最新的文章了...

相关文章

uniapp开发微信小程序微信支付实战

前端框架:uniapp后端框架:laravel后端依赖:overtrue/wechat照例我们还是安装一下easywechat依赖composer require overtrue...

uniapp中的unipush中遇到的坑

uniapp中的unipush中遇到的坑

项目用到了uniapp,而且用到了unipush,不得不说集合了很多功能在一点确实很好用,但是也有一些坑,需要一个一个的踩,而且官方文档说明不是很全,或者说说明全了,但是藏到了一些不显眼的角落,普通开...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。