How to use uniapp to develop picture shooting function

How to use uniapp to develop picture shooting function

Introduction:
With the popularity of smartphones, photography has become an indispensable part of people's lives. In mobile application development, the picture shooting function has also become an important part of many applications. This article will introduce how to use uniapp to develop picture shooting functions, and attach code examples to help readers quickly master this technology.

1. Preparation work
Before starting development, we need to ensure that the following preparation work has been completed:

1. Install the HBuilderX development environment and install "uni" in the uniapp plug-in market -mp-vue" plugin.
2. Understand the basic usage of the uniapp framework.
3. There is a mobile phone that supports camera function for testing.

2. Create a project

1. Open HBuilderX, click New Project, select the uniapp template, fill in the project name and select the appropriate path.
2. Create a new page under the pages folder in the project and name it "camera".

3. Develop the picture shooting function

1. In the vue file of the camera page, we need to write the following code:

<template>
  <div class="camera">
    <!-- 显示相机画面的区域 -->
    <camera class="camera-preview" @created="onCameraCreated" @error="onCameraError"></camera>
    <!-- 拍摄按钮 -->
    <button class="capture-button" @click="captureImage">拍摄</button>
    <!-- 显示拍摄后的照片 -->
    <image :src="photoUrl" class="captured-photo"></image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photoUrl: ''
    }
  },
  methods: {
    onCameraCreated(camera) {
      this.camera = camera
      // 相机已创建，可以开始预览
      camera.startPreview()
    },
    onCameraError(error) {
      console.error('Camera error:', error)
    },
    captureImage() {
      // 拍摄照片
      this.camera.takePhoto().then((res) => {
        // 将照片保存到相册
        uni.saveImageToPhotosAlbum({
          filePath: res.tempImagePath,
          success: (res) => {
            uni.showToast({
              title: '保存成功',
              icon: 'success'
            })
          },
          fail: (error) => {
            console.error('Save image error:', error)
          }
        })
        this.photoUrl = res.tempImagePath
      }).catch((error) => {
        console.error('Capture image error:', error)
      })
    }
  }
}
</script>

<style>
.camera {
  position: relative;
  height: 100%;
}

.camera-preview {
  width: 100%;
  height: 100%;
}

.capture-button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #007AFF;
  color: #FFF;
  border-radius: 6px;
  font-size: 16px;
}

.captured-photo {
  width: 300px;
  height: 300px;
  margin-top: 20px;
}
</style>

2. Add camera permissions in the manifest.json file:

{
  "mp-weixin": {
    "permission": {
      "scope.camera": {
        "desc": "用于拍摄照片"
      }
    }
  }
}

3. Run and test

1. Click the run button in HBuilderX and select Run to Mini Program Developer Tools .
2. Log in to the WeChat developer account in the Mini Program Developer Tools, and ensure that the mobile phone is connected to the developer tools.
3. Click the preview button in the mini program developer tool and scan the QR code with WeChat to see the effect of the application on your phone.
4. Click the capture button in the app to take photos and display them on the interface. Photos are also saved to your phone's photo album.

Conclusion:
This article introduces how to use uniapp to develop the picture shooting function and provides a complete code example. Through the above steps, readers can quickly master the development methods of uniapp framework and picture shooting function. I hope this article can be helpful to readers and realize their own mobile application development needs.

The above is the detailed content of How to use uniapp to develop picture shooting function. For more information, please follow other related articles on the PHP Chinese website!