uniapp预览图片详解

一、预览图片的基本用法

在uniapp中，我们可以使用`uni.previewImage()`API对图片进行预览，具体使用方法如下：

uni.previewImage({
  urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'],
  current: 0
});

其中，`urls`参数为一个字符串数组，表示需要预览的图片数组；`current`参数为一个数字，表示当前选中的图片在数组中的索引值，从0开始计数。

在调用`uni.previewImage()`方法后，uniapp会显示系统自带的图片预览界面，用户可以滑动查看多张图片，也可以缩放图片进行查看。

二、自定义预览组件

如果预览图片需要一些自定义的功能，例如添加分享按钮或者保存图片按钮，我们可以使用`uni.previewImage()`方法的`customButtons`参数来自定义按钮。具体代码如下：

uni.previewImage({
  urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'],
  current: 0,
  customButtons: [{
    icon: 'https://example.com/share.png',
    text: '分享',
    onTap: function() {
      // 分享图片
    }
  }, {
    icon: 'https://example.com/save.png',
    text: '保存到相册',
    onTap: function() {
      // 保存图片到相册
    }
  }]
});

其中，`customButtons`参数为一个对象数组，表示自定义按钮的配置，每个对象包含3个属性：

• `icon`：按钮的图标，可以是本地图片路径或者网络图片路径。
• `text`：按钮的文本。
• `onTap`：按钮的点击事件回调函数。

三、查看原图

在预览图片时，部分用户可能需要查看原图，而默认情况下uniapp并不会加载原图，而是按照屏幕尺寸进行裁剪和缩放。如果需要查看原图，需要对`uni.previewImage()`方法的`urls`参数进行修改，将缩略图路径替换成原图路径。具体代码如下：

uni.previewImage({
  urls: ['https://example.com/image1_original.jpg', 'https://example.com/image2_original.jpg'],
  current: 0
});

通过将`urls`参数中的缩略图路径替换成原图路径，就可以实现查看原图的功能。

四、动态预览图片

在某些情况下，我们需要动态生成并预览多张图片，例如根据用户输入的关键字搜索相关图片后，需要展示搜索结果中的图片。此时，可以使用`wx.previewImage()`方法动态生成预览组件。具体代码如下：

// 动态生成预览组件
let preview = uni.createPreviewImage({
  // 图片地址数组
  urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'],
  // 当前显示图片的索引值
  current: 0,
  // 预览组件显示成功的回调函数
  success () {
    console.log('预览组件显示成功');
  },
  // 关闭预览组件的回调函数
  fail () {
    console.log('预览组件关闭');
  }
});

// 更新图片地址数组
preview.update({
  urls: ['https://example.com/image3.jpg', 'https://example.com/image4.jpg']
});

// 更新当前显示图片的索引值
preview.update({
  current: 1
});

// 关闭预览组件
preview.close();

通过调用`uni.createPreviewImage()`方法动态生成预览组件，可以动态生成多个预览组件，并对预览组件进行各种操作，例如更新图片地址数组、更新当前显示图片的索引值、关闭预览组件等。

五、支持长按保存图片

在默认情况下，uniapp的图片预览组件不支持长按保存图片功能。如果需要支持长按保存图片功能，需要借助插件`uni-saving-image-plugin`来实现。具体使用方法如下：

• 安装插件：使用HBuilderX，找到项目根目录，右键选择“插件”→“插件管理器”，搜索插件`uni-saving-image-plugin`并安装。
• 在`pages.json`文件中添加配置信息：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/preview-image/preview-image",
      "style": {
        "navigationBarTitleText": "预览图片"
      },
      "usingComponents": {
        "uni-preview-image": "@dcloudio/uni-ui/lib/uni-preview-image/uni-preview-image"
      }
    }
  ],
  "easycom": {
    "autoscan": true,
    "custom": {
      "uni-preview-image": "@dcloudio/uni-ui/lib/uni-preview-image/uni-preview-image"
    }
  },
  "plugins": {
    "uni-saving-image-plugin": {
      "version": "1.0.0",
      "provider": "uni-silence"
    }
  }
}

在`plugins`节点中添加`uni-saving-image-plugin`插件的配置信息，其中`version`参数表示插件的版本号，`provider`参数表示插件的提供者。

• 在`preview-image.vue`文件中添加代码：

   

<script>
export default {
  data () {
    return {
      currentIndex: 0,
      images: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg'
      ]
    };
  }
}
</script>

在`uni-preview-image`组件中添加`show-save-button`属性，并将其设置为`true`，表示显示保存按钮。当用户长按图片时，预览组件会显示保存按钮，用户点击保存按钮即可保存当前图片到相册中。