> For the complete documentation index, see [llms.txt](https://easonwang.gitbook.io/web_advance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easonwang.gitbook.io/web_advance/react-native/ying-ti-cao-zuo/xiang-ji-yu-tu-pian-ku-cun-qu.md).

# 相機與圖片庫存取

## React Native 相機與圖片庫存取

<https://github.com/react-community/react-native-image-picker>

```javascript
yarn add react-native-image-picker
react-native link react-native-image-picker

然後記得重啟

react-native run-android
```

> 記得在Androidmanifest 加上 camera permission
>
> ```
> <uses-permission android:name="android.permission.CAMERA" />
> ```

然後

```javascript
selectImage(){
    const options = {
      title: 'Select Avatar',
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };

    /**
     * The first arg is the options object for customization (it can also be null or omitted for default options),
     * The second arg is the callback which sends object: response (more info in the API Reference)
     */
    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = { uri: response.uri };

        // You can also display the image using data:
        // const source = { uri: 'data:image/jpeg;base64,' + response.data };

        this.setState({
          avatarSource: source,
        });
      }
    });
  }
```

## 可以裁的 image picker

<https://github.com/ivpusic/react-native-image-crop-picker>

> 之後記得更新 gradle version

簡單上傳 imgur 範例

> 記得先去註冊 <https://api.imgur.com/oauth2/addclient> 然後改 client ID

```javascript
const handlePicker = async () => {
    try {
      const selectedImage = await ImagePicker.openPicker({
        width: 550,
        height: 500,
        cropperCircleOverlay: true,
        cropping: true,
        freeStyleCropEnabled: true,
        includeBase64: true,
      });
      const imageBase64 = selectedImage.data;
      const xhttp = new XMLHttpRequest();
      xhttp.open('POST', 'https://api.imgur.com/3/image', true);
      xhttp.setRequestHeader('Content-type', 'application/json');
      xhttp.setRequestHeader('Authorization', 'Client-ID b50a7351eee91f');
      xhttp.send(JSON.stringify({image: imageBase64}));
      xhttp.onreadystatechange = function () {
        if (xhttp.readyState === 4 && xhttp.status === 200) {
          console.log(JSON.parse(xhttp.responseText));
        }
      };
    } catch (err) {
      console.log(err);
    }
  };
```

這邊出來的圖形大小就是參數設定的寬與高，如果要圓形可以在顯示的時候再處理。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://easonwang.gitbook.io/web_advance/react-native/ying-ti-cao-zuo/xiang-ji-yu-tu-pian-ku-cun-qu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.