更新记录

1.0.0（2024-05-29）

发布小程序 自定义相机拍照并截取图片 组件

平台兼容性

自定义相机拍照截图

属性说明

示例代码

<template>
  <view class="image-box">
    <image v-if="imgUrl" class="img" :src="imgUrl" mode="widthFix" @click.prevent="onPreviewImage" />
    <view v-else class="no-img">暂无图片，请点击下方按钮拍照</view>
  </view>
  <button class="photo-btn" @click="isPhoto = true">开始拍照</button>
  <bcode-camera v-if="isPhoto" @onConfirm="onConfirmCamera"></bcode-camera>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const imgUrl = ref('') // 图片url
const isPhoto = ref(false) // 是否开始拍照

// 拍照确认回调
const onConfirmCamera = (data: { url: string }) => {
  imgUrl.value = data.url
  isPhoto.value = false
  console.log('onConfirmCamera', data)
}

// 预览图片
const onPreviewImage = () => {
  uni.previewImage({
    urls: [imgUrl.value],
    longPressActions: {
      itemList: ['发送给朋友', '保存图片', '收藏'],
      success: function (data) {
        console.log('预览图片', data)
      },
      fail: function (err) {
        console.log(err.errMsg)
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.image-box {
  width: 100%;
  height: 700rpx;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;

  .no-img {
    text-align: center;
    color: #999;
  }
}

.photo-btn {
  margin-top: 32rpx;
  width: 80%;
  background-color: #244087;
  color: #fff;
}
</style>