Allows to crop image, cover some image areas with another images, merge them and send resulted image to the server
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tony Air 49c102425f
Update package.json
4 years ago
dist Language fix 4 years ago
src Language fix 4 years ago
.gitignore Initial 4 years ago
LICENSE Initial commit 4 years ago Update 4 years ago
package.json Update package.json 4 years ago
webpack.config.js Initial 4 years ago


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



Install required modules using: npm install

Start development server: yarn start

Access development server at:

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