https://github.com/skybrud/sky-crop
Vue module for dealing with cropping/scaling images from umbracos ImageProcessor
https://github.com/skybrud/sky-crop
Last synced: 10 months ago
JSON representation
Vue module for dealing with cropping/scaling images from umbracos ImageProcessor
- Host: GitHub
- URL: https://github.com/skybrud/sky-crop
- Owner: skybrud
- License: mit
- Created: 2015-10-12T08:46:43.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T08:03:12.000Z (over 3 years ago)
- Last Synced: 2025-07-20T22:37:09.679Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 481 KB
- Stars: 0
- Watchers: 9
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# sky-crop
> VueJS module for cropping images from umbraco imageprocessor (http://imageprocessor.org/imageprocessor-web/).
Only requirement is that the original size of the image is included in the url parameters.
- ImageProcessor/Umbraco urls - eg. `[imagePath]?anchor=center&height=600&width=1000`
-----
## Installation
```bash
npm install sky-crop
```
or
```bash
yarn add sky-crop
```
-----
## Usage
Begin by importing and installing the SkyCrop Vue plugin:
```js
import Vue from 'vue';
import SkyCrop from 'sky-crop';
// If you want to use the baseline scss add the following line
import '${YOUR-PROJECT-ROOT-PATH}/node_modules/sky-crop/dist/sky-crop.css';
Vue.use(SkyCrop);
```
The `` component registers globally and can now be used.
Basic example:
``` html
```
Advanced example:
``` html
```
### Available attributes (optional):
Read as *`attributeName="defaultValue"` [supported types]*
* `mode="width"` [String] : 'width', 'height', 'cover', 'contain'
* `:round="100"` [Number]
* `:options="{ upscale: false }"`
* `alt="alternative text"` [String]
### mode
Best result will be given if the container has width and height set in css.
*width*
* image will fill entire container width - height will be based on the image original ratio.
* only `width` dimension is required in this mode.
*height*
* image will fill entire container height - width will be based on the image original ratio.
* only `height` dimension is required in this mode.
*contain*
* image will always be fully visible.
* `height` and `width` is required in this mode.
*cover*
* image will fill entire container - overflow is hidden.
* `height` and `width` is required in this mode.
#### round
Indication of how often you would like a recrop of your image.
**Case:** image is loaded and starts with cropped dimensions at 350x350. At `round="100"` should the image be stretch to more than `400` in width and/or `400` in height, a recrop will be initiated.
#### options
A hook for using all available methods provided by imageprocessor - for a full reference see this link: http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/
#### alt
Native `![]()
` attribute, great for a11y.
-------
## Events:
The SkyCrop component emits two events:
* `loaded` - when a cropped image finishes loading, the emitted data it the loaded src url.
* `loading` - when fetching of a new crop is ongoing
**Note:** These events can be triggered multiple times per component - for instance if the viewport is resized and a new crop is needed.
Example:
```html
```
-----
## Credits
This module is made by the Frontenders at [skybrud.dk](http://www.skybrud.dk/). Feel free to use it in any way you want. Feedback, questions and bugreports should be posted as issues. Pull-requests appreciated!