uni-app海报保存制作

最新推荐文章于 2024-07-23 09:04:54 发布

liuhaoxin666

最新推荐文章于 2024-07-23 09:04:54 发布

阅读量1.5k

点赞数

分类专栏： uni-app

本文链接：https://blog.csdn.net/liuhaoxin666/article/details/105116872

版权

本文介绍了如何在uni-app中实现海报的保存。首先，通过getSetting获取用户相册授权，接着利用uni.canvasToTempFilePath截取并设置画布质量及格式。最后，使用uni.saveImageToPhotosAlbum将海报保存到用户的相册。同时，还提及了如何结合二维码生成画布并一同保存的代码实现。

摘要由CSDN通过智能技术生成

一，海报保存首先需要授权相册，可以通过getsetting来授权，代码如下：
在这里插入图片描述 二，通过uni.canvasToTempFilePath这个api来截取画布，然后保存到相册，首先需要设置画布大小和质量，文件格式等，代码如下：
三，然后就需要将图片保存到相册了，通过uni.saveImageToPhotosAlbum这个api将海报保存到相册，代码如下：
在这里插入图片描述详细代码如下，因为我制作的时候还获取了一下二维码，所以多了一点代码就是将二维码也生成了一个画布，将它和海报一起保存了。代码如下：

<template>
 	<view>
 		<canvas class="can" canvas-id="mycan"></canvas>
 		<button @click="bye">保存海报</button>
 	</view>
 </template>
 
 <script>
 	export default {
   
 		data() {
   
 			return {
   
 				backurl: '../../static/1031236779.jpeg'
 			}
 		},
 		onShow: function(option) {
   
 			var that = this
 			// 邀请码接口请求
 			uni.request({
   
 				url: 'https://exam.qhynice.top/index.php/Api/User/getWxcode',
 				data: {
   
 					invite_code: uni.getStorageSync('id')
 				},
 				header: {
   
 					'content-type': 'application/x-www-form-urlencoded'
 				},
 				method: 'POST',
 				success: (res