cropper-image-mask/README.md

52 lines
1.2 KiB
Markdown
Raw Permalink Normal View History

2019-05-31 19:43:58 +02:00
# cropper-image-mask
2019-05-31 19:53:19 +02:00
Allows to crop image and cover some image areas with another images.
1) Select an image at your computer
2) Crop image at the browser
3) Select image mask and place it to the cropped image area u'd like to cover
4) Select an other image mask or click "Submit"
2019-05-31 20:07:52 +02:00
Resulted image (cropped and merged with image masks) will be sent to the server using AJAX.
2019-05-31 19:53:19 +02:00
Example of uploading processing at src/upload.php
2019-05-31 20:07:52 +02:00
# Demo
https://rawcdn.githack.com/a2nt/cropper-image-mask/master/dist/index.html
2019-05-31 19:53:19 +02:00
## Usage
Install required modules using:
npm install
Start development server:
yarn start
Access development server at:
http://127.0.0.1:8001
Build your cropper script:
yarn build
2019-05-31 20:07:52 +02:00
## Directory structure
src/ - your sources
2019-05-31 20:08:51 +02:00
2019-05-31 20:07:52 +02:00
-- src/app.scss - specific app style
2019-05-31 20:08:51 +02:00
2019-05-31 20:07:52 +02:00
-- src/_events.js - app events definitions
2019-05-31 20:08:51 +02:00
2019-05-31 20:07:52 +02:00
-- src/_ui.spinner.js - spinner example
2019-05-31 20:08:51 +02:00
2019-05-31 20:07:52 +02:00
-- src/_ui.form.croppie.scss - cropper-image-mask field style
2019-05-31 20:08:51 +02:00
2019-05-31 20:07:52 +02:00
-- src/_ui.form.croppie.js - cropper-image-mask field js
2019-05-31 20:08:51 +02:00
2019-05-31 20:07:52 +02:00
-- src/index.html - HTML example
2019-05-31 20:08:51 +02:00
2019-05-31 20:07:52 +02:00
-- src/img - some example images
2019-05-31 20:08:51 +02:00
2019-05-31 20:07:52 +02:00
-- src/upload.php - example of server-side processing
2019-05-31 20:08:51 +02:00
2019-05-31 20:07:52 +02:00
dist/ - compiled scipts after "yarn build"
2019-05-31 20:08:51 +02:00
2019-05-31 20:07:52 +02:00
You can open dist/index.html to see demo