uni-app uni.previewImage预览GIF图片时无法放大

uni-app uni.previewImage预览GIF图片时无法放大

示例代码：

uni.previewImage({  
    urls: ["https://pic.qupinwei.com/app/image/member/6575152/6575152_07060609977153224.gif"],  
})

操作步骤：

  • 复制代码示例运行即可

预期结果：

  • gif的宽度小于屏幕的宽度时，自动继承宽度为屏幕的宽度

实际结果：

  • gif的宽度小于屏幕的宽度时，未继承屏幕的宽度。png,jpg是正常的

bug描述：

  • 使用图片预览api如果预览的是.gif放大后没有全屏显示，我觉得该预览api应该给一个参数类似于image组件的mode来满足不同的开发需求。

| 信息类别         | 信息内容        |
|------------------|-----------------|
| 产品分类         | uniapp/App      |
| PC开发环境       | Windows         |
| PC开发环境版本   | window10        |
| HBuilderX类型    | 正式            |
| HBuilderX版本    | 3.4.7           |
| 手机系统         | Android         |
| 手机系统版本     | Android 11      |
| 手机厂商         | OPPO            |
| 手机机型         | PCNM00          |
| 页面类型         | vue             |
| vue版本          | vue2            |
| 打包方式         | 云端            |
| 项目创建方式     | HBuilderX       |

更多关于uni-app uni.previewImage预览GIF图片时无法放大的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

自适应的

更多关于uni-app uni.previewImage预览GIF图片时无法放大的实战教程也可以访问 https://www.itying.com/category-93-b0.html


gif没有自适应。放大出来的效果是原尺寸，png jpg是自适应 ，而且gif的无法双指操作

有没有官方看下

顶一下

0 0 顶一下

顶一下

我也遇到这个问题了。ios正常。安卓上 gif 很小一个，不放大

查了历史，几年前就有这个bug，几年了都没修 ，可恶

哈哈哈

在 uni-app 中使用 uni.previewImage 预览图片时，默认情况下，GIF 图片无法通过手势放大缩小。这是因为 uni.previewImage 的实现是基于微信小程序的 wx.previewImage，而微信小程序的 wx.previewImage 默认不支持对 GIF 图片进行缩放操作。

解决方案

  1. 自定义图片预览组件：

    • 如果你需要支持 GIF 图片的放大缩小功能，可以考虑自己实现一个图片预览组件。
    • 使用 swiper 组件来实现图片的滑动切换，使用 image 组件来显示图片，并通过手势事件来实现图片的缩放功能。

  2. 使用第三方插件：

    • 你可以使用一些第三方插件来实现图片预览功能，这些插件通常支持对 GIF 图片的缩放操作。例如，可以使用 uView 或 mescroll 等 UI 库中的图片预览组件。

  3. 使用原生开发：

    • 如果你对性能要求较高，可以考虑使用原生开发来实现图片预览功能，原生开发可以更好地控制图片的缩放和手势操作。

示例代码（自定义图片预览组件）

以下是一个简单的自定义图片预览组件的示例：

<template>
  <view class="preview-container">
    <swiper :current="currentIndex" @change="onSwiperChange">
      <swiper-item v-for="(image, index) in images" :key="index">
        <view class="image-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
          <image
            :src="image"
            :style="imageStyle"
            mode="aspectFit"
          />
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://example.com/image1.gif',
        'https://example.com/image2.gif'
      ],
      currentIndex: 0,
      scale: 1,
      startX: 0,
      startY: 0
    };
  },
  computed: {
    imageStyle() {
      return {
        transform: `scale(${this.scale})`,
        transition: 'transform 0.3s ease'
      };
    }
  },
  methods: {
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
    },
    onTouchStart(e) {
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    },
    onTouchMove(e) {
      const currentX = e.touches[0].clientX;
      const currentY = e.touches[0].clientY;
      const deltaX = currentX - this.startX;
      const deltaY = currentY - this.startY;

      // 根据手势移动距离调整缩放比例
      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
      this.scale = 1 + distance * 0.01;
    },
    onTouchEnd() {
      // 手势结束后恢复默认缩放比例
      this.scale = 1;
    }
  }
};
</script>

<style>
.preview-container {
  width: 100%;
  height: 100%;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

image {
  max-width: 100%;
  max-height: 100%;
}
</style>
回到顶部