Vue Advanced Cropper

# Cropper Types

The croppers are different. The mission of this library is give the developer possibility to create not only croppers with different appearance, but also with different behavior.

Despite the variety of different croppers they can be classified on the three groups:

If you able to create all of them, you will able to create almost any of existing and even possible croppers.

# Classic Cropper

The classic cropper is the cropper, where the major way to choice an area is the resizing and moving the stencil. Depending on specific cropper use may or may not resize and move image, but it's always the minor way.

Examples: Yandex (opens new window).

The most basic cropper configuration will give you the classic cropper, that is displayed above.

<cropper :src="img" />

# Static Cropper

The static cropper has the static stencil. It doesn't have handlers, it can't be moved or resized. An user can only change the image size and position.

Examples: Twitter (opens new window), Instagram (opens new window).

# Basic Implementation

To implement the static cropper above you should:

  • set image-restriction to stencil (to give an user the possibility to move the image to the edge of the fixed stencil)
  • disable the stencil adjusting to prevent the changing of stencil size during the image resize
  • hide the handlers, disable move and scale for the stencil or use a custom one
  • set the aspect ratio, because you can't change aspect ratio in the static cropper and you shouldn't rely on a random one
<cropper
	:src="img"
	:stencil-props="{
		handlers: {},
		movable: false,
		resizable: false,
		aspectRatio: 1,
	}"
	:resize-image="{
		adjustStencil: false
	}"
	image-restriction="stencil"
/>

# Improving Techniques

# The fixed stencil size

The stencil size in the cropper above is pretty unpredictable. For the used image above it's already too small. You can imagine what the stencil size you would get for a narrower image. So the fixed croppers have fixed stencil size alike.

The most simpler way to set fixed stencil size is using stencil-size (opens new window) prop.

Notice, that in the following example:

  • aspectRatio is not set explicitly because it's calculated from stencil-size,
  • adjustStencil option is absented too because it's always disabled if you use stencil-size prop.
<cropper
	:src="img"
	:stencil-props="{
		handlers: {},
		movable: false,
		resizable: false,
	}"
	:stencil-size="{
		width: 280,
		height: 280
	}"
	image-restriction="stencil"
/>

Thus, taking into account the written above the recommended implementation of fixed cropper type is following:

<cropper
	:src="img"
	:stencil-props="{
		handlers: {},
		movable: false,
		resizable: false,
	}"
	:stencil-size="{
		width: 280,
		height: 280
	}"
	image-restriction="stencil"
 />

# Hybrid Cropper

The hybrid cropper is the cropper that has semi-static stencil, i.e. user able to change its size and position, but it always tries to return to some default position and return some default size.

This process of returning to some default constraints is called auto zoom.

Examples: Telegram (opens new window).

# Implementation

To implement the hybrid cropper we will use the fragments of recommended implementations and just add autoZoom prop to them.

# Classic Hybrid

The classic hybrid is the cropper type, that is very similar to the classic cropper, but its stencil is automatically resized and moved. It makes it more closer to static cropper, because its stencil tries to be static.

<cropper
	:src="img"
	:auto-zoom="true"
 />

# Fixed Hybrid

The fixed hybrid is the cropper type, that is very similar to the fixed cropper, but user is able to change the size and position of cropper.

<cropper
	:src="img"
	:auto-zoom="true"
	:stencil-size="{
		width: 280,
		height: 280
	}"
	image-restriction="stencil"
 />

← Concepts →