uniapp 实现小程序，h5保存海报图片

最新推荐文章于 2024-04-18 15:49:43 发布

北京的北京

最新推荐文章于 2024-04-18 15:49:43 发布

阅读量1.1k

点赞数 3

分类专栏： uniapp 微信小程序 h5 文章标签：前端微信小程序

本文链接：https://blog.csdn.net/m0_58135258/article/details/125593949

版权

微信小程序同时被 3 个专栏收录

14 篇文章 1 订阅

订阅专栏

uniapp

13 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

<!-- 海报 -->
<view class="cardArray" :class="canvasrShow?' ':'cardArray2'" catchtouchmove="true">
	<image class="close-ico" :src="getimg('poster_close.png')" @click="closeShare()"></image>
	<canvas style="width: 260px; height: 460px;" canvas-id="firstCanvas1"></canvas>
</view>

// 保存图片
			goPoster() {
				// #ifdef H5 
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas1',
					success: (res) => {
						//把base64转换成Blob数据
						uni.downloadFile({
							url: res.tempFilePath,
							success: (res) => {
								// console.log(res);
								//创建一个a标签
								var link = document.createElement('a');
								//把a标签的href属性赋值到生成好了的url
								link.href = res.tempFilePath;

								//通过a标签的download属性修改下载图片的名字
								link.download = '分享海报.png';
								//让a标签的click函数，直接下载图片
								link.click();
							}
						})
					},

					fail: function(err) {
						
					}
				})
				// #endif
				// #ifdef MP || APP-PLUS
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas1',
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								uni.showModal({
									title: "保存成功",
									content: "图片已成功保存到相册，快去分享到您的圈子吧",
									showCancel: false
								})
							}
						})

					},
					fail: function(err) {

					}
				})
				// #endif

			},