更新记录

1.1.3（2026-04-24） 下载此版本

fix

1.1.2（2026-04-23） 下载此版本

更新IOS版

1.1.1（2026-03-22） 下载此版本

涂抹马赛克改变成黑色背景，涂抹视图支持手势缩放跟平移。

平台兼容性

uni-app(5.07)

安装

将 uni_modules/rd-YOLO 目录复制到项目的 uni_modules 目录下。

功能特性

• YOLO 目标检测（实时相机/图片）
• 透视矫正（根据4个角点坐标矫正图像）
• 拖拽调整检测区域
• 无延迟拍照体验（缓存帧预览）
• 最高质量拍照模式
• 自动裁剪检测区域

工作流程

拍照流程

1. 调用 takePhoto() → 显示缓存帧预览
2. 真实照片处理完成 → 显示 PhotoPreviewDialog
3. 用户拖拽调整检测区域 → 点击"使用照片"
4. 透视矫正裁剪 → 返回裁剪后的图片路径

图片检测流程

1. 调用 detectImageFull(path) → YOLO 检测图片
2. 检测完成 → 显示 PhotoPreviewDialog（带检测框）
3. 用户拖拽调整检测区域 → 点击"使用照片"
4. 透视矫正裁剪 → 返回裁剪后的图片路径

事件说明

nativeResult 返回值

方法说明

Vue2 使用示例

<template>
  <view class="container">
    <!-- 相机组件 -->
    <rd-YOLO 
      ref="camera"
      class="camera-preview"
      @onCameraReady="onCameraReady"
      @onModelLoaded="onModelLoaded"
      @onYoloDetectFull="onYoloDetectFull"
      @onImageDetectFull="onImageDetectFull"
      @onPhoto="onPhoto"
      @onRectifyResult="onRectifyResult"
      @onError="onError"
    />

    <!-- 控制按钮 -->
    <view class="controls">
      <button @click="capturePhoto">拍照</button>
      <button @click="chooseFromAlbum">相册</button>
      <button @click="switchCamera">切换摄像头</button>
      <button @click="toggleFlash">闪光灯</button>
    </view>
    <image :src="img" style="width: 750rpx;height: 500rpx;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      img: '',
      isCameraReady: false
    }
  },

  methods: {
    // 相机就绪回调
    onCameraReady(e) {
      console.log('相机已就绪', e.detail.message)
      this.isCameraReady = true
    },

    // 模型加载完成
    onModelLoaded({ detail }) {
      console.log('模型加载:', detail.success ? '成功' : '失败')
    },

    // 拍照
    capturePhoto() {
      if (!this.isCameraReady) {
        uni.showToast({ title: '相机未就绪', icon: 'none' })
        return
      }
      this.$refs.camera.takePhoto()
    },

    // 从相册选择图片
    chooseFromAlbum() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original'],
        sourceType: ['album'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths
          console.log('选择的图片:', tempFilePaths[0])
          // 调用完整检测
          this.$refs.camera.detectImageFull(tempFilePaths[0])
        },
        fail: (err) => {
          console.log('选择图片失败:', err)
        }
      })
    },

    // 拍照完成回调（返回裁剪后的图片路径）
    onPhoto({ detail }) {
      this.img = 'file://' + detail.path
      console.log('裁剪后的图片:', detail.path)
    },

    // 透视矫正结果回调
    onRectifyResult({ detail }) {
      console.log('矫正结果:', detail.nativeResult)
      if (detail.nativeResult > 0) {
        console.log('矫正成功')
      } else {
        console.log('矫正失败, code:', detail.nativeResult)
      }
    },

    // 实时检测回调
    onYoloDetectFull({ detail }) {
      console.log('检测到', detail.count, '个目标')
    },

    // 图片检测完成回调
    onImageDetectFull({ detail }) {
      const { path, results, imageWidth, imageHeight } = detail
      console.log('检测完成，图片:', path)
      results.forEach(item => {
        console.log(`检测到: ${item.label}, 置信度: ${(item.confidence * 100).toFixed(1)}%`)
      })
    },

    // 切换摄像头
    switchCamera() {
      this.$refs.camera.switchCamera()
    },

    // 切换闪光灯
    toggleFlash() {
      const result = this.$refs.camera.toggleFlash()
      uni.showToast({ 
        title: result ? '闪光灯已开启' : '闪光灯已关闭', 
        icon: 'none' 
      })
    },

    // 错误回调
    onError(e) {
      console.error('相机错误:', e.detail.message)
      uni.showToast({ title: e.detail.message, icon: 'none' })
    }
  }
}
</script>

<style>
.container {
  flex: 1;
}

.camera-preview {
  width: 750rpx;
  height: 500rpx;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20rpx;
}
</style>

检测结果说明

results 数组中每个对象包含：