diff --git a/README.md b/README.md index 14ddee9e0..fb0b242c4 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,157 @@ description: Take pictures with the device camera. [![Android Testsuite](https://github.com/apache/cordova-plugin-camera/actions/workflows/android.yml/badge.svg)](https://github.com/apache/cordova-plugin-camera/actions/workflows/android.yml) [![Chrome Testsuite](https://github.com/apache/cordova-plugin-camera/actions/workflows/chrome.yml/badge.svg)](https://github.com/apache/cordova-plugin-camera/actions/workflows/chrome.yml) [![iOS Testsuite](https://github.com/apache/cordova-plugin-camera/actions/workflows/ios.yml/badge.svg)](https://github.com/apache/cordova-plugin-camera/actions/workflows/ios.yml) [![Lint Test](https://github.com/apache/cordova-plugin-camera/actions/workflows/lint.yml/badge.svg)](https://github.com/apache/cordova-plugin-camera/actions/workflows/lint.yml) +## Consider using native Browser features + +It's not necessary to use this plugin for selecting images or using the camera. You can use native browser features instead, primarly the `` tag. + +### Select image + +You can select an image from the device using ``: + +**HTML** + +```html + + +``` + +**JavaScript** + +```js +const imageInput = document.getElementById('imageInput'); +const imagePreview = document.getElementById('imagePreview'); + +imageInput.addEventListener('change', (event) => { + // Get the first selected file + const file = event.target.files[0]; + + // Check if user selected successfully a file + // It can be "undefined" if: + // 1. The user opens the file picker but cancels without selecting a file + // 2. The input's value is cleared or no file is selected + if (!file) return; + + // Output file informations + console.log(`Selected file, name: ${file.name}, size: ${file.size} bytes, type: ${file.type}`); + + // Use native FileReader API + const reader = new FileReader(); + + // Listen to the load event of the FileReader, which is fired, + // when the file was succesfully read + reader.addEventListener('load', (event) => { + imagePreview.src = event.target.result; + }; + + // Get base64 encoded string of file, which will be "data:*/*;base64," + reader.readAsDataURL(file); +}); +``` + +This approach works on all modern browsers and mobile devices without requiring a native plugin. + +MDN documentation for ``: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file + +### Take a picture + +You can access the device camera using ``: + +**HTML** + +```html + + +``` + +**JavaScript** + +```js +const cameraInput = document.getElementById('cameraInput'); +const capturedPhoto = document.getElementById('capturedPhoto'); + +cameraInput.addEventListener('change', (event) => { + const file = event.target.files[0]; + + if (!file) return; + + // Output file information + console.log(`Photo captured, name: ${file.name}, size: ${file.size} bytes, type: ${file.type}`); + + // Display the photo + const reader = new FileReader(); + reader.addEventListener('load', (event) => { + capturedPhoto.src = event.target.result; + }); + reader.readAsDataURL(file); +}); +``` + +The `capture` attribute can have different values: +- `capture="environment"` - Open the back camera +- `capture="user"` - Open the front camera (selfie) +- `capture` (without value) - Let the device choose + +MDN documentation for the `capture` attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/capture + +#### Take a picture with `