Blog Detail


The Most Advanced Image Cropper With Vue Js cover image

arrow_back The Most Advanced Image Cropper With Vue Js

Norserium launched a highly efficient Vue Js Image cropper called Vue Advanced Cropper, Which allows you to create almost any cropper that you desire. It is easy to use and customize. It provides support for desktop and mobile devices. It has built-in support for touch events, cropper resizing, etc.
This Cropper can be used to create a canvas with a cropped area or just coordinates relative to the original image to crop it server-side in the future. It has many advanced features like, It can set minimum and maximum aspect ratios, and it can also customize minimum and maximum height and width.


You can install this via npm or yarn.


npm install --save vue-advanced-cropper


yarn add vue-advanced-cropper


After the installation, you’ve to import this into your view component.

import Vue from 'vue'
import { Cropper } from 'vue-advanced-cropper'

new Vue({
  el: '#app',
  data: {
    img: ''
  methods: {
    change({coordinates, canvas}) {
      console.log(coordinates, canvas)
  components: {
<div id="app">
      aspectRatio: 10/12

You can set the limits for the cropper sizes or its container sizes. Otherwise, a cropping image will try to fill all available space.

.cropper {
  height: 600px;
  background: #DDD;


Prop Type Description Default
src String The cropping image (link / base64) -
stencilComponent String, Object The stencil component RectangleStencil
stencilProps Object The props for the stencil component {}
class String The optional class for the root cropper block -
imageClass String The optional class for the cropping image -
boundariesClass String The optional class for the area. -
backgroundClass String The optional class for the background under the image -
autoZoom Boolean Enable / disable transitions false
autoZoom Boolean Enable / disable auto zoom true
stencilSize Object The size of the stencil in pixels -
debounce String, Number The time before change event will be emitted after changes (ms) 500

There are a lot of other props and events available in this advanced Vue Cropper, if you want to utilize it, you should view its whole documentation here.

Published at : 03-09-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project