基于uniapp框架的图片预览与图片保存

[221900218黄旭]

目录

• 技术概述
• 技术详述
• 1.图片预览
• 2.图片保存
• 技术使用中遇到的问题和解决过程
• 总结
• 参考文献

技术概述

当前端要将服务器传来的图片显示到app中，往往会显示图片大小，但要看清图片细节时，就需要使用图片的预览功能，同时，主流app往往也支持将图片下载到本地。

技术详述

1.图片预览

要实现图片预览，那就先需要一张图片，定义一个点击事件，当点击图片是触发pictureView()方法

使用预览功能，可以调用uni.previewImage(OBJECT)，查阅官方文档

于是在pictureView()使用该api，其中this.cover是图片url

实现截图
初始界面：

点击图片，图片进入预览：

2.图片保存

在上面的官方文档可以看到有一个参数longPressActions，对该参数有如下说明：

所以可以通过success返回的tapIndex确定点击按钮的索引值，根据不同索引值调用不同方法。比如保存到本地就要使用uni.saveImageToPhotosAlbum(OBJECT)这个API，官方文档说明如下：

懂得了这些，要实现图片保存，可以接在上面的urls后写入longPressActions的实现

实现截图
长按出现如下界面：

点击“保存图片”，成功保存提示“保存成功”：

技术使用中遇到的问题和解决过程

1. uni.closePreviewImage(OBJECT)中的urls是数组，当图片只有一张的时候怎么办？

可以写成urls:[该图片url]的形式,创建一个只有一个url的数组

2. 当 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，查看官方文档，理解每个参数含义，就能轻松实现。

参考文献

uniapp官方文档

[CSDN-Ada助手]

您可以前往 CSDN问答-移动开发 发布问题, 以便更快地解决您的疑问