https://github.com/a2nt/cropper-image-mask
Allows to crop image, cover some image areas with another images, merge them and send resulted image to the server
https://github.com/a2nt/cropper-image-mask
Last synced: 24 days ago
JSON representation
Allows to crop image, cover some image areas with another images, merge them and send resulted image to the server
- Host: GitHub
- URL: https://github.com/a2nt/cropper-image-mask
- Owner: a2nt
- License: bsd-2-clause
- Created: 2019-05-31T17:43:57.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-31T18:18:05.000Z (about 7 years ago)
- Last Synced: 2025-05-29T11:55:26.349Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://rawcdn.githack.com/a2nt/cropper-image-mask/master/dist/index.html
- Size: 3.44 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cropper-image-mask
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"
Resulted image (cropped and merged with image masks) will be sent to the server using AJAX.
Example of uploading processing at src/upload.php
# Demo
https://rawcdn.githack.com/a2nt/cropper-image-mask/master/dist/index.html
## 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
## Directory structure
src/ - your sources
-- src/app.scss - specific app style
-- src/_events.js - app events definitions
-- src/_ui.spinner.js - spinner example
-- src/_ui.form.croppie.scss - cropper-image-mask field style
-- src/_ui.form.croppie.js - cropper-image-mask field js
-- src/index.html - HTML example
-- src/img - some example images
-- src/upload.php - example of server-side processing
dist/ - compiled scipts after "yarn build"
You can open dist/index.html to see demo