uniapp如何压缩预览图片，不超过边框，并能放大缩小 滑动下一张

uni-app 中可以使用第三方插件 `uni-image-cropper` 来实现图片裁剪、缩放、预览等功能。具体实现步骤如下：

1. 安装 `uni-image-cropper` 插件

在 HBuilderX 中选择项目，在菜单栏中选择 `工具` -> `插件安装`，搜索 `uni-image-cropper` 插件并安装。

2. 在需要使用的页面中引入 `uni-image-cropper` 组件

在页面的 .vue 文件中引入 `uni-image-cropper` 组件，并在 `components` 中注册。

<template>
  <view>
    <uni-image-cropper :src="imgSrc" :options="options" @complete="onComplete"></uni-image-cropper>
  </view>
</template>

<script>
import uniImageCropper from '@/components/uni-image-cropper/uni-image-cropper.vue'

export default {
  components: {
    uniImageCropper
  },
  data() {
    return {
      imgSrc: '/static/image.jpg',
      options: {
        aspectRatio: 1,
        maxZoom: 2,
        minZoom: 0.5,
        outputType: 'jpg',
        quality: 0.8
      }
    }
  },
  methods: {
    onComplete(result) {
      console.log(result)
    }
  }
}
</script>

其中，`imgSrc` 属性指定要裁剪的图片链接，`options` 属性是一个对象，用于设置裁剪、缩放等参数。

3. 在 `options` 中设置参数

`aspectRatio` 属性用于指定裁剪框的宽高比，默认为 1:1。

`maxZoom` 和 `minZoom` 属性用于指定图片的最大缩放比例和最小缩放比例。

`outputType` 属性用于指定输出图片的格式，可选值为 `jpg` 和 `png`。

`quality` 属性用于指定输出图片的质量，取值范围为 0-1。

4. 监听 `complete` 事件，获取裁剪结果

当用户完成裁剪操作后，`uni-image-cropper` 组件会触发 `complete` 事件，可以通过监听该事件来获取裁剪结果。

在 `complete` 事件的回调函数中，可以获取到裁剪后的图片链接、裁剪框的位置等信息。

onComplete(result) {
  console.log(result)
}

以上就是使用 `uni-image-cropper` 插件实现图片裁剪、缩放、预览等功能的步骤。