2022年福大-软件工程、实践-W班
基于uniapp框架的图片预览与图片保存
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区目录
- 技术概述
- 技术详述
- 1.图片预览
- 2.图片保存
- 技术使用中遇到的问题和解决过程
- 总结
- 参考文献
技术概述
当前端要将服务器传来的图片显示到app中，往往会显示图片大小，但要看清图片细节时，就需要使用图片的预览功能，同时，主流app往往也支持将图片下载到本地。
技术详述
1.图片预览
要实现图片预览，那就先需要一张图片，定义一个点击事件，当点击图片是触发pictureView()方法
使用预览功能，可以调用uni.previewImage(OBJECT)，查阅官方文档
于是在pictureView()使用该api，其中this.cover是图片url
实现截图
初始界面：
点击图片，图片进入预览：
2.图片保存
在上面的官方文档可以看到有一个参数longPressActions，对该参数有如下说明：
所以可以通过success返回的tapIndex确定点击按钮的索引值，根据不同索引值调用不同方法。比如保存到本地就要使用uni.saveImageToPhotosAlbum(OBJECT)这个API，官方文档说明如下：
懂得了这些，要实现图片保存，可以接在上面的urls后写入longPressActions的实现
实现截图
长按出现如下界面：
点击“保存图片”，成功保存提示“保存成功”：
技术使用中遇到的问题和解决过程
- uni.closePreviewImage(OBJECT)中的urls是数组，当图片只有一张的时候怎么办？
可以写成urls:[该图片url]的形式,创建一个只有一个url的数组
- 当 urls 中有重复的图片链接时：
传链接，预览结果始终显示该链接在 urls 中第一次出现的位置。
传索引值，在微信/百度/字节跳动小程序平台，会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls不会做去重处理。
举例说明：
一组图片 [A, B1, C, B2, D]，其中 B1 与 B2 的图片链接是一样的。传 B2 的链接，预览的结果是 B1，前一张是 A，下一张是 C。 传 B2 的索引值 3，预览的结果是 B2，前一张是 C，下一张是D。此时在微信/百度/字节跳动小程序平台，最终传入的 urls 是 [A, C, B2, D]，过滤掉了与 B2 重复的 B1。
总结
总的来说没有难度，使用给好的api，查看官方文档，理解每个参数含义，就能轻松实现。
参考文献
...全文
