Blog Detail

3

Sep
The Most Advanced Image Cropper With Vue Js cover image

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.

Installation

You can install this via npm or yarn.

Npm

npm install --save vue-advanced-cropper

Yarn

yarn add vue-advanced-cropper

Usage

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: 'https://images.pexels.com/photos/226746/pexels-photo-226746.jpeg'
  },
  methods: {
    change({coordinates, canvas}) {
      console.log(coordinates, canvas)
    }
  },
  components: {
    Cropper
  }
})
//html
<div id="app">
  <cropper
    classname="cropper"
    :src="img"
    :stencilProps="{
      aspectRatio: 10/12
    }"
    @change="change"
  ></cropper>
</div>

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;
}

Props

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
AUTHOR
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.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project