Package Exports

selfie.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (selfie.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Selfie.js

Selfie with Java Script

Install

bower

$ bower install selfie.js

npm

$ bower install selfie.js

How to use

<!-- add selfie.js -->
<script src="path/to/selfie.min.js"></script>

const s = selfie.init(options);
s.takePhoto(); // method to take photo.
s.removePhoto(); // method to remove photo.

Options (Everything is optional. Not necessary)

option - (Object)
- target - (Object) It shoud be 'Node Element'. Its default value is document.body.
- fileName - (String) Set file's name. Default is 'selfie' and file extension is png.
- downloadLinkText - (String) Set download link's text. Default is 'DOWNLOAD'.
- camera - (Object) It is 'Video Element' for displaying camera.
  - id - (String) If you want to add ID to this node element, Specify it.
  - className - (String) If you want to add class to this node element, Specify it.
  - activeClass - (String) If you want to add class to node element when it is activated, Specify it.
  - unactiveClass - (String) If you want to add class to node element when it is unactivated, Specify it.
- store - (Object) It is 'Canvas Element' for save selfie temporarily.
  - id - (String) If you want to add ID to this node element, Specify it.
  - className - (String) If you want to add class to this node element, Specify it.
  - activeClass - (String) If you want to add class to node element when it is activated, Specify it.
  - unactiveClass - (String) If you want to add class to node element when it is unactivated, Specify it.
- photo - (Object) It is 'Image Element' for displaying selfie taken.
  - id - (String) If you want to add ID to this node element, Specify it.
  - className - (String) If you want to add class to this node element, Specify it.
  - activeClass - (String) If you want to add class to node element when it is activated, Specify it.
  - unactiveClass - (String) If you want to add class to node element when it is unactivated, Specify it.
- download - (Object) It is 'Anchor Element' for download selfie. It has 'download' attributes.
  - id - (String) If you want to add ID to this node element, Specify it.
  - className - (String) If you want to add class to this node element, Specify it.
  - activeClass - (String) If you want to add class to node element when it is activated, Specify it.
  - unactiveClass - (String) If you want to add class to node element when it is unactivated, Specify it.

Example

// Set options. It is not necessary.
const options = {
  target: document.getElementById('selfie-wrapper'),
  fileName: 'selfie',
  downloadLinkText: 'Click',
  camera: {
    id: 'selfie-camera',
    activeClass: 'active',
    unactiveClass: 'none',
    className: 'selfie-camera'
  },
  store: {
    id: 'selfie-store',
    activeClass: 'active',
    unactiveClass: 'none',
    className: 'selfie-store'
  },
  photo: {
    id: 'selfie-image',
    activeClass: 'active',
    unactiveClass: 'none',
    className: 'selfie-image'
  },
  download: {
    id: 'selfie-download',
    activeClass: 'active',
    unactiveClass: 'none',
    className: 'selfie-download'
  }
};

// Initialize
const s = selfie.init(options);

// take photo
document.querySelector('SELFIE_SHUTTER_BUTTON').onclick = s.takePhoto();

// remove photo
document.querySelector('REMOVE_SELFIE').onclick = s.removePhoto();

Licence

MIT