uni H5 保存canvas 绘制的图片的 uni api 不支持H5 ios 不能保存解决办法

最新推荐文章于 2024-09-29 13:57:41 发布

Are姜祁

最新推荐文章于 2024-09-29 13:57:41 发布

阅读量1.1k

点赞数

分类专栏： uniVue 实现海报分享文章标签： ios html5 javascript

本文链接：https://blog.youkuaiyun.com/weixin_44079209/article/details/120845977

版权

uniVue 实现海报分享专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在uni-app中，如何解决iOS端H5无法直接长按保存图片的问题，介绍了两种方法：一是利用a标签配合下载提示，二是通过canvas内嵌img实现。重点在于兼容微信浏览器并提供可操作的下载体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前使用uni官网的api 写的app 是没有问题的回头看到 api 不支持H5
安卓是可以直接长按保存到手机相册的
ios 端不行
第一种解决办法绑定a 标签进行下载

// 第一种方法 使用a标签 进行下载 只能下载下来  实现不理想
uni.showModal({
					title: '提示',
					content: '保存图片到手机中',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let ua = window.navigator.userAgent.toLowerCase()
							if (ua.match(/MicroMessenger/i) == 'micromessenger') {
								uni.$showMsg('微信浏览器不支持长按保存，请用手机浏览器打开')
								// do something
							}
							var oA = document.createElement("a");
							oA.download = ''; // 设置下载的文件名，默认是'下载'
							oA.href = that.saveImg;
							document.body.appendChild(oA);
							oA.click();
							oA.remove(); // 下载之后把创建的元素删除


						} else if (res.cancel) {
							console.log('用户点击取消');

						}
					}
				});
// 第二种方法 需要给canvas 里加上img 标签绑定src 就可以实现 
<canvas :style="{width:imgWidth+'px',height:imgHeight+'px'}" canvas-id="myCanvas" class="topImg">
			
			<img :src="saveImg" class="linkimage" mode="widthFix" />
</canvas>


 .linkimage {
	        display: block;
	        width: 100%;
	        height: 100%;
	        -webkit-touch-callout: default;  // 要配置这行关键代码，不然可能不生效
	      }