https://github.com/fabricelements/skeleton-focal
Focal point for your images
https://github.com/fabricelements/skeleton-focal
focal image image-recognition polymer web-component
Last synced: 18 days ago
JSON representation
Focal point for your images
- Host: GitHub
- URL: https://github.com/fabricelements/skeleton-focal
- Owner: FabricElements
- License: bsd-3-clause
- Created: 2017-08-18T16:09:13.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-09-12T18:04:00.000Z (almost 8 years ago)
- Last Synced: 2025-01-15T08:59:56.663Z (over 1 year ago)
- Topics: focal, image, image-recognition, polymer, web-component
- Language: HTML
- Size: 2.96 MB
- Stars: 3
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://travis-ci.org/FabricElements/skeleton-focal) [](https://www.webcomponents.org/element/FabricElements/skeleton-focal) [](https://vaadin.com/directory/component/FabricElementsskeleton-focal)
## \
`skeleton-focal` is a [Polymer 3](http://polymer-project.org) element that provides a focal point for your images.
Allows you to drag the focal point and returns the value in attributes that reflects the selected `x` and `y` coordinates in a 0-1 range.
```html
Focal point coordinates
-
X: [[x]] -
Y: [[y]]
```
## Installation
Install skeleton-focal with npm
```shell
$ npm install FabricElements/skeleton-focal --save
```
## Usage
Import it into the `` of your page
```html
```
### Example: basic usage
```html
```
* `src` (string) - The URL of an image.
* `x` (number) - attribute that reflects the selected x coordinate in a 0-1 range.
* `y` (number) - attribute that reflects the selected y coordinate in a 0-1 range.
### Other attributes
* `loaded` (boolean) - Read-only value that is true when the image is loaded.
* `crossorigin` (string) - CORS enabled images support: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
* `placeholder` (string) - This image will be used as a background/placeholder until the src image has loaded. Use of a data-URI for placeholder is encouraged for instant rendering.
* `preventLoad` (boolean) - When true, the image is prevented from loading and any placeholder is shown. This may be useful when a binding to the src property is known to be invalid, to prevent 404 requests.
## Contributing
Please check [CONTRIBUTING](./CONTRIBUTING.md).
## License
Released under the [BSD 3-Clause License](./LICENSE.md).