uniapp 兼容IOS长按保存图片功能

问题描述

uniapp H5项目开发中遇到长按图片保存的兼容性问题；在Android浏览器中长按保存没得问题，但是在IOS浏览器中会出现长按没有反应的现象。

处理问题

此类问题在vue项目中也有出现过，解决的核心是给img标签添加 -webkit-touch-callout: default 的 style 属性

<img :src="showImageUrl" style="-webkit-touch-callout: default"></img>

于是尝试

<image :src="showImageUrl" style="-webkit-touch-callout: default"></image>

但结果并没有解决问题，难道是 image 标签的问题？虽然 uniapp 组件中并没有img标签但是并不影响img 标签在H5项目中正常的使用

<!-- 将 -->
<image :src="showImageUrl" style="-webkit-touch-callout: default"></image>
<!-- 替换成 -->
<img :src="showImageUrl" style="-webkit-touch-callout: default"></img>

问题得以解决。

在搜索解决方案的过程中看到一个类似如下的代码

<canvas style="width: 100%;height:100%;">
		<img :src="showImageUrl" width="100%" height="100%" style="-webkit-touch-callout: default;" />
</canvas>

IOS兼容问题也是可以得到解决，查看了一圈文档没找为什么 img 标签外面要添加一个 canvas 标签的具体作用是什么。。。

自己也就封装了一下兼容IOS、Android长按保存图片小组件（用上了不明觉厉的canvas标签）：

<template>
	<canvas style="width: 100%;height:100%;">
		<img :src="showImageUrl" width="100%" height="100%" style="-webkit-touch-callout: default;" />
	</canvas>
</template>

<script>
	/**
	 * w-image 图片；
	 * @description 展示图片，兼容IOS、Android长按保存图片组件；
	 * @property {String} showImageUrl ；
	 */
	export default {
		name: 'w-image',
		props: {
			showImageUrl: {
				type: String,
				default: ''
			},
		},
	}
</script>

<style scoped>
</style>

---