advanced-cropper/vue-advanced-cropper

The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design

Documentation / Examples / Sandbox / Sandbox + Composition API

---

🔥 HEADS UP! You're currently looking at the branch for Vue 2. For the Vue 3 branch, please check out the vue-next branch.

---

Vue Advanced Cropper is the advanced library that allows you to create custom croppers suited for any website design. It means that you can change not only the cropper's appearance but also its behavior.

Features:

• full mobile/desktop support
• support all three main types of croppers right out of the box
• support both canvas and coordinates modes, minimum and maximum aspect ratios, custom size restrictions
• zoom, rotate, resize image
• auto-zoom, transitions

The codesandbox for mobile / desktop examples above.

Install

Vue 3.0

npm install --save vue-advanced-cropper

yarn add vue-advanced-cropper

Vue 2.0

npm install --save vue-advanced-cropper@vue-2

yarn add vue-advanced-cropper@vue-2

If you would like to use a CDN, please read the corresponding documentation section

Usage

import Vue from 'vue'
import { Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css';

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

<div id="app">
  <cropper
    class="cropper"
    :src="img"
    :stencil-props="{
      aspectRatio: 10/12
    }"
    @change="change"
  ></cropper>
</div>

/*
  You may need to set the limits for the cropper sizes or container sizes,
  otherwise, a cropping image will try to fill all available space
*/
.cropper {
  height: 600px;
  background: #DDD;
}

Cropper

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
transitions	Boolean	Enable / disable auto zoom	true
stencilSize	Object	The size of the stencil in pixels
debounce	String, Number	The time before the change event will be emitted after changes (ms)	500
canvas	Boolean	The flag that indicates if canvas should be used	true
minWidth	String, Number	The minimum width of the stencil (percents)
minHeight	String, Number	The minimum height of the stencil (percents)
maxWidth	String, Number	The maximum width of the stencil (percents)
maxHeight	String, Number	The maximum height of the stencil (percents)
checkOrientation	Boolean	Check if EXIF orientation should be checked	true
resizeImage	Boolean, Object	The options for the image resizing (details)	true
moveImage	Boolean, Object	The options for the image moving (details)	true
imageRestriction	String	Set restrictions for image position ('fill-area' 'fit-area', 'stencil', 'none')	'fill-area'
defaultSize	Object, Function	The function that returns the default size of the stencil or object	core.defaultSize
defaultPosition	Object, Function	The function that returns the default position of the stencil or object	core.defaultPosition
defaultBoundaries	String, Function	The function that determines the boundaries size or string ('fill', 'fit')	'fill'
sizeRestrictionsAlgorithm	Function	The function that returns the restrictions object

Event	Description
change	Invoked on the changing of a stencil's position/size after mounting the component and on an image change
ready	Invoked on the success of an image loading
error	Invoked on an error of an image loading

RectangleStencil

Prop	Type	Description	Default
aspectRatio	Number	The aspect ratio
minAspectRatio	Number	The minimum aspect ratio
maxAspectRatio	Number	The maximum aspect ratio
class	String	The class for the root block of the stencil component
previewClass	String	The class for the preview component
movingClass	String	The class applied when the user drags the stencil
resizingClass	String	The class applied when the user resizes the stencil
boundingBoxClass	String	The class for the bounding box component
handlerComponent	String,Object	The handler component
handlers	Object	The object of handlers that should be visible or hidden.
handlersClasses	Object	The object of custom handler classes
handlersWrappersClasses	Object	The object of custom handler wrapper classes
lineComponent	String,Object	The handler component
lines	Object	The object of the lines that should be visible or hidden.
linesClasses	Object	The object of custom line classes
linesWrappersClasses	Object	The object of custom line wrapper classes

License

The source code of this library is licensed under the MIT license, and the documentation and photos belong to their respective owners.

vue-advanced-cropper's Issues

Cropped images massively increasing file size -- resource failures

We have implemented this excellent cropper for profile and drawer photos. However, when uploading, for example, a png iphone photo of 4mb actual size, upload fails due to network error. In reviewing the problem, we found that what's being taken to the server as the cropped images (square, rectangle) are over 15mb each. And this is stretching resource limits and in many cases causing network errors or upload times 2+ mins in which no user will wait. Any ideas? Saw similar issues on another cropper here: fengyuanchen/cropper#542

Default Stencil with Aspect Ratio and Maximum Width

Hello,

firstly: Great component, thanks!
Could you provide an example for a cropper configuration with a default stencil having maximum width of 100% of the image but also sticks to a custom aspect ratio (for e.g. 16/9).

I tried a few things and also searched through the docs. Using setCoordinates, ready event , stencilProps, but I cant get it to work. Thank you!!

Fixed stencil

Hi @Norserium. Can you please help out with this. Im trying to set a fixed stencil width and height(regardless of src image). Currently using restrictions but i dont get the same stencil size on each image selected. I have set my own constant restrictions in the props.

What i expect: Same stencil size on each image selected
What i get: stencil dimensions change depending on image selected

Heres a snppet

 <cropper
          :restrictions="pixelsRestriction"
          :stencilComponent="$options.components[stencilComponent]"
          backgroundClassname="bg-cropper"
          :stencilProps="{
            handlers: {},
            classname: stencilClass,
            scalable: false
          }"
          ref="cropper"
          :src="img"
          classname="cropper"
        ></cropper>

...

pixelsRestriction({
      minWidth,
      minHeight,
      maxWidth,
      maxHeight,
      imageWidth,
      imageHeight
    }) {
      
      return {
        maxWidth: 500,
        imageHeight: 150,
        imageWidth: 150,
        minWidth: 100,
        minHeight: 100,
        maxHeight: 500
      }
    }

In above i am passing in stencilComponent and stencilClass as props

Get avatar from facebook with 404 error

Hi!

I use cropper for edit avatar, when user is sign up with facebook. Cropper add timestamp get param to image url before request and facebook send an error.

It was in v0.16.1 but the image appeared. In v0.16.2 i have a blank editor without image. I downgraded version to v0.16.1 and it works.

I don’t understand how it can be in 0.16.1 when we have 404 error but image was appeared.

I think you can provide an option to disable timestamp for some user cases.

Zoom in/out

Is there any way we can zoom in or out the image.

Validate the image height and width

I want the user to select an image that will be cropped on the aspect ratio of 2:3 (vertical image), this crop will be sent to the backend to be resized. The question I have is: how can I validate the image the user selected so he can't select an image that is too small to be cropped as 2:3 or even on the minimum width 570px for example?
The backend will also this 570px width image with the 2:3 aspect ratio and make other variants like 50% smaller and so on.

SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

When installed version ^0.12.2, most browsers on early versions of IOs are throwing the error:
SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.
preventing applications to render properly. Is there anybody else facing this same issue?

Rotate image

how to rotate image and the result too ?

@change and upload images problem

Hello

1. Uploading pictures.
2. Adding the @change method.
3. Picture is growing forever.

Where am I making a mistake.

source code

https://jsfiddle.net/0x1b7oau/

Fixed circle stencil padding

I've followed your documentation but cropper with fixed circle stencil has padding that doesn't allow full image height or width to be used as a source of cropping. Didn't found (or don't understand) how to solve this issue.

Edit:
It looks that moving image around in fixed mode is not available until first shrink/zoom. After that imageRestriction seems to work fine.

Vue.js vue-advanced-cropper error

When I select an image it is continuously cropping the image in a loop until it can't crop anymore. I am getting this error in my logs

app.js:81265 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

Resize image when user crop image

I really like your feature
but i have a question
I have an example:
I have a picture with width and height : 1280 x 720
when the user finishes cropping . it maybe will 800 x 800
but in fact that picture just have size is 300 x 300
this plugin can do that ?

default size/position and aspect ratio not respected

Should this be working: https://jsfiddle.net/jt58ogf6/

CDN Competent Not Registered

I'm using the CDN option but am unable to access the canvas component via $refs it's always undefined, do you have a working example using CDN and accessing global components?

Disable zoom image

is there any way to disable the zoom of the image? i only want to crop the original size of the image
thank you

Nuxt integration

I'm using the library with regular Vue application without any problems.

Now I'm integrating the library in a nuxt application, however passing :src="imageUrl" does not assign to the src property but as data-src - check the screen shot https://take.ms/ZlgyZ

<VueCropper ref="cropper" class="cropper" :check-cross-origin="false" :src="imageUrl" />

I'm able to set the src using refs, but this is incorrect property mutation

this.$refs.cropper.src = value

Rotation Bugs on iOS?

Hi there,

I have been playing to Cropper trying to get it working for site users to upload profile images. I like the package a lot and have found it quite useful. We have found in some cases though, specifically with images loaded from iOS, the rotation is wrong when displayed in the preview window.

It may be due to PNG images having some other sort of alternate EXIF info. Not sure.
We are using the code you posted here to upload the initial image.
https://norserium.github.io/vue-advanced-cropper/tutorials/recipes.html#upload-image

Once the image is cropped, we then save the result to a file. The saved result then seems to have the correct orientation however the cropped image seems wrong.

Any thoughts on how we might fix this? I'm not sure if it is something we can change or if it is a bug in vue-advanced-cropper.

Pass cropper to every image and get the result

hello, allow me to explain my point first before going to the questions.
imagine I have select 3 images from input and set them same aspect ratio, and a button OK that later convert a base64 image (i get from using getResult() method) into an image file and upload it. Using this

const {coordinates, canvas} = this.$refs.cropper.getResult()
this.coordinates = coordinates
this.image = canvas.toDataURL()

or this

onChange({coordinates, canvas}) {
    this.coordinates = coordinates
    this.image = canvas.toDataURL()
}

can only get the result if I have clicked on each image at least once. my question is if I select 3 images from the browser then click OK right away I couldn't get the result of all 3 images, so is there any way to pass the cropper to every image?

canvas.toDataURL doesn't respect stencil

Hi, thanks for an awesome component! The docs are great and the component is very easy to use 💯

I have an issue with calling

const { canvas } = this.$refs.cropper.getResult()

this.$emit("submit", canvas.toDataURL())

with both the default CircleStencil and the advanced stencil example. The result is always a rectangle with full corners.

I've also created a replication here:

https://codesandbox.io/s/vue-sc4k6

My current workaround is to apply a small border radius to the image that displays the result, but ideally (especially with maybe changing the stencil in the future), I'd like a way to get the image cropped by the stencil 🙏

Set Aspect Ratio

Is it possible to change the aspect ratio?

stencil () {
  console.log(this.ratio)
  return {
    aspectRatio: this.ratio[0] / this.ratio[1],
    handlers: {
      eastNorth: true,
      north: false,
      westNorth: true,
      west: false,
      westSouth: true,
      south: false,
      eastSouth: true,
      east: false
    }
  }
}

When I change this.ratio the console.log is triggered, but the cropper is not updated.

I tried to fire the .update() but it isn't working

Cannot build unit tests of project that imports vue-advanced-cropper

Since I added vue-advanced-cropper to a project built with webpack, unit tests (ran with vue-cli-service test:unit) fail to compile.

TypeError: Cannot read property 'startsWith' of undefined
    at styleInject ([...]\dist\webpack:\node_modules\vue-advanced-cropper\dist\index.es.js:68:1)
    at Module../node_modules/vue-advanced-cropper/dist/index.es.js ([...]\dist\webpack:\node_modules\vue-advanced-cropper\dist\index.es.js:87:1)
    at __webpack_require__ ([...]\dist\webpack:\webpack\bootstrap:25:1)

The problem stems from the file index.es.js:

function styleInject(id, css) {
	if (!css || typeof document === 'undefined') { return; }

	var element;
	var head = document.head || document.getElementsByTagName('head')[0];
	var styleElements  = head.getElementsByTagName('style');

	// To prevent dublicate of the style code during the script reload
	for (var i = 0; i < styleElements.length; i++) {
		if (styleElements[i].innerText.startsWith('/*for=' + id)) {
			element = styleElements[i];
		}
	}

Changing

if (styleElements[i].innerText.startsWith('/*for=' + id)) {

to

if (styleElements[i].innerText && styleElements[i].innerText.startsWith('/*for=' + id)) {

fixes it.

Is there something else I should be doing to make it work on my end, or is it a bug?

Transform to image after cropping

I implemented the cropping with validation and everything works fine on the front end, I also need to validate the backend as the image is going to be sent from an API. If I validate on the front end as the max image size as 5MB and the same on the back end, it won't work cause as the cropper works with base64 I will have a WAY bigger image on the backend:

• https://stackoverflow.com/questions/11402329/what-is-the-effect-of-encoding-an-image-in-base64

Do you have any idea on what I can do to solve this? I'm currently converting the base64 to an image before sending with this code:

export default dataURI => {
    let byteString =
        dataURI.split(',')[0].indexOf('base64') >= 0
            ? atob(dataURI.split(',')[1])
            : unescape(dataURI.split(',')[1])

    const mimeString = dataURI
        .split(',')[0]
        .split(':')[1]
        .split(';')[0]

    let ia = new Uint8Array(byteString.length)

    for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i)
    }

    return new Blob([ia], { type: mimeString })
}

This code will convert the base64 image from the cropper to a Blob so I can send using axios.

This way I can validate the image on the back end as well but the image sizes are way different.

InvalidStateError in Safari after file selection

The component is working fine in Chrome. However in Safari I see the following error after selecting a file to upload.

[Error] InvalidStateError: The object is in an invalid state.
	drawImage (app.js:68072:53179)
	updateCanvas (app.js:68072:53179)
	updateCanvas
	getResult (app.js:68072:52000)
	getResult
	update (app.js:68072:53288)
	update
	onChangeCoordinates (app.js:68072:53637)
	onChangeCoordinates
	(anonymous function) (app.js:68072:59834)

So it fails to do anything else after that point. It's working in Chrome but I do see the below error in the Developer tool (This is on page load, with an initial image URL supplied). You do not see an error in Chrome after file selection and it proceeds normally despite this error, Not sure if they might be related.

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at VueComponent.updateCanvas (http://xxx/js/app.js:68072:53169)
    at VueComponent.getResult (http://xxx/js/app.js:68072:51987)
    at VueComponent.update (http://xxx/js/app.js:68072:53278)
    at VueComponent.onChangeCoordinates (http://xxx/js/app.js:68072:53630)
    at http://xxx/js/app.js:68072:59814

Persistant CORs error while using cropper

I have a web app fetching images cross-origin. The server that is serving those images is configured to allow cross-origin requests and I can see the images in various places. However, when I try and load that image using the cropper I suddenly get failed CORs requests.

In the source I can see you're checking if the image src URL is cross origin, and if so then setting the anonymous flag for the canvas so it isn't in "taint" mode. Before I jump any further into the source looking for the problem, is this expected/a known issue?

toDataURL returning nothing

It was working before, including the examples @Norserium made and I:

• https://codesandbox.io/s/vue-avanced-cropper-basic-f711u
• https://codesandbox.io/s/gallery-crop-rnk26

You select the image, crop but the images are not being loaded as the base64 representation of the crop is not being return by toDataURL

TypeError: Property 'handleEvent' is not callable in Firefox

Hi Norserium! I'm getting an error in console after selecting the image and passing the cursor over the document, just in Firefox:

TypeError: Property 'handleEvent' is not callable.

I'm using the last version 0.12.2.

Please, can you help?

cropper box does not show the right section of the image at start

hello . first of all i have to say thanks for developing this useful component
i have an issue and i dont know the reason. when i put my image to cropper, at start the cropper box does not show the right section of the image.like the picture below(pay attention to the hand that exist in picture. it cut the hand and move it)

but when i move the box 1 or 2 times across the whole image it works correctly.

can you see the diffrence between this two images ? how can i solve this problem ?
thanks

Set aspect ratio based on the image orientation

Is there a way to set the aspect ratio based on the image width and height?

I want to check if the image is landscape and set the aspect ratio as 4:3 and min width and height as 500x375. If the image is portrait, the aspect ratio must be 2:3 and the width and height as 400x600 min.

how to get result with double Click Or button?

Hi
how can I get result with double Click Or button on the image?

Handling errors

Hi,

I was wondering if there's a recommended way to handle whatever error this library may encounter. I figured an @error event or the like would be useful to have, so if the cropper fails to load an image for any reason, I can properly reset the interface and inform the user, without having to rely on an arbitrary timer to check whether the @ready event fired.

Thanks you in advance!

Scroll and restrict area doesn't works

I use cropper in modal of VueBootstrap, and it's important to use cropped area for crop image. I'm getting code from example. No problems in example but not on my site...

<b-modal size="xl" id="cropAvatar" hide-footer>
<template v-slot:modal-title>
    Загрузка аватара
</template>
<div>
    <div class="row">
        <div class="col-12">
            <div class="avatar-area">
                <cropper
                    classname="upload-example-cropper"
                    :src="loadedAvatar"
                    :defaultPosition="defaultPosition"
                    :defaultSize="defaultSize"
                    :restrictions="pixelsRestriction"
                    :stencil-props="{
                        movable: true,
                        scalable: true,
                    }"
                    :minHeight="200"
                    :minWidth="200"
                    :maxWidth="200"
                    :maxHeight="250"
                    @change="loadAvatar"
                ></cropper>
            </div>
        </div>
    </div>
</div>
</b-modal>

defaultPosition() {
    return {
        left: 100,
        top: 100
    }
},
defaultSize() {
    return {
        width: 200,
        height: 250,
    }
},
pixelsRestriction({minWidth, minHeight, maxWidth, maxHeight, imageWidth, imageHeight}) {
    return {
        minWidth: minWidth,
        minHeight: minHeight,
        maxWidth: maxWidth,
        maxHeight: maxHeight,
    }
},
handleAvatar() {
    var input = event.target;
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = (e) => {
                this.loadedAvatar = e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
    }
},
loadAvatar() {

}

<style>
    .upload-example-cropper {
        width: 100%;
        height: 400px;
    }
</style>

With this code I'm getting this: image can't be scallable, it is reduced to a height in the style that everything becomes 2 times smaller. If I'm deleting style, size becomes normally, but scaling doesn't works.

No errors and warnings in console.

---

UPD: Problem because restrictions was set. But I need them.

Getting NaN on positional arguments after using setCoordinates()

Hi, I'm using the setCoordinates function on a image that contains an object which I already know the position.

The problem is that after I use the function, the positional arguments(left and top) are both returning NaN as value, the size arguments(width and height) are being seated correctly.

After that the image and the cropper starts to have a strange behave, like in the print.

this is the code I'm using:

this.$refs.cropper.setCoordinates({ width: response.data.box.width, height: response.data.box.height, left: response.data.box.left, top: response.data.box.top });

I'm also attaching a print of the console error

Is it somenthing I did wrong? I couldn't find anything like this in the issues or in the docs.
Do you know how I can fix this?

Reset Cropper

i use the input file upload image, but when i set image = null, it remains the size of the square vue-advanced-cropper__image, what is the propper manner to reset the vue-advanced-cropper__area, vue-advanced-cropper__stretcher to width auto

How to make it responsible

I'm planning in using the cropper on a modal, the problem I'm having is that even tho the width is being respected of the modal, the height isn't. If the user selects an image bigger than the height of the browser it will grow vertically and eventually disappears.

How can I make so the cropper respects the width and height like keeping its aspect ratio based on the width of the modal?

It's more or less like this example: https://norserium.github.io/vue-advanced-cropper/tutorials/recipes.html#upload-image

If you select a REALLY big height image it won't get bigger, it will scale to fit the area.

An image for example: https://picsum.photos/id/96/800/2000

stencilProps issue

Hi,
I have an issue to load image with dimensions equals (also the minimum dimensions I configured) to the asspect ratio.

for example:
the image dimensions is exacly width: 1500px and height: 375px.

when using the following asspect ratio:
{
minAspectRatio: 4 / 1,
maxAspectRatio: 4 / 1
}

the stencil deminisions is 0 for width, height, left, top and also a console error received with the following message:

" (index):1 Uncaught (in promise) Current aspect ratio can't is uncompatible with minimum/maximum height and width settings. Can't setup default coordinates"

when using the following ratio:
{
minAspectRatio: 1 / 1,
maxAspectRatio: 1 / 1
}

It's working perfect.

the total conponent configuration i'm passing into the cropper:

`
<Cropper ref="cropper"
:src="file"
class="cropper-element"
areaClassname="copperContainer"
:restrictions="resPixels"
:minHeight="375"
:minWidth="1500"
:stencilProps="{
minAspectRatio: 4 / 1,
maxAspectRatio: 4 / 1
}"
@change="change">

resPixels(minWidth, minHeight, maxWidth, maxHeight, imageWidth, imageHeight) {
return {
minWidth: this.minWidth > 400 ? this.minHeight * this.cropperRatio.maxAspectRatio : minWidth,
minHeight: this.minHeight > 400 ? this.minHeight : minHeight,
maxWidth: imageWidth,
maxHeight: imageHeight
}
}

`

Please your kind help for detecting if it's a bug or a configuration issue.
Itsik.

Coordinates do not clear properly when using Firefox

When uploading an image the first time, it works as expected. When uploading another image consecutively after, the coordinates do not clear properly. Left and top coordinates become NaN and height and width stay the same.

On Chrome, coordinates clear properly each time.

Rotate mobile upload image

Hi, Norserium. When uploading images on mobile, if the image is not - almost - a square - as it is the case with pictures taken with a mobile camera - it defaults to landscape orientation, even if the image was originally in portrait orientation. Is it possible to fix this? By the way, this is a great library, good work!!

Thoughts and plans about 1.0

This issue is created to discuss new changes, include breaking changes in the new version. Feel free to discuss about the planned changes.

Breaking changes:

1. Move the styles to independent .css file. It will require to add <link href="/path/to/vue-advanced-cropper.css" rel="stylesheet"> to your code, but make this process more clearer.
2. Rename classname, backgroundClassname, imageClassname, linesClassnames and classnames to class, backgroundClass, imageClass, linesClasses and classes respectively.
3. Rename restrictions prop to sizeRestrictionsAlgorithm.
4. Set the pixels restrictions by default instead of the percents restrictions.
5. Change the list of available image restrictions to fill-area, fit-area, stencil and none.
6. Move algorithms in the external package.

Question: Crop with fill

Hello,

Let's say I have an image 320x500.

I'd like to allow a crop with aspect ratio 1:1 - so that the picture when done cropping is always square.

But I'd like to allow the crop to go all the way to 500x500; so that the crop is bigger than the image, and then the background to be filled with white.

Is there a solution for this?

how to download crop image

anyone answer me to how to add a button to download crop image
like this code not available url
https://norserium.github.io/vue-advanced-cropper/tutorials/recipes.html#different-image-restrictions

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Hello! Your plugin are very usefull but I have a problem. My Vuejs project listen 8000 port on localhost, and API listen 8001. I get this error when I want to get my image from Database:

Access to image at 'http://127.0.0.1:8001/uploads/page_images/5d3f7f3270844593066656.jpeg' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

How do I limit the maximum height of the entire screenshot area?

When the picture height is too high, I want to set the maximum height of the entire area. Is there an interface for this?

Screenshot
http://h.pz.com/u/7875/44/5/157484391773.jpg

Programmatically maximise cropper

Hi Norserium, thanks for sharing such as great component!

Is it possible to programmatically set the crop region? I am trying to implement a button that maximises it so it is easy to include all the image without dragging out the handles.

Zoom in/out of image

Hi, I noticed that the image can be zoomed in/out with the mousepad and when I inspect the element it shows that some style is added to the image that enables it to zoom in/out.

My question is if there is a way to bind that zoom in/out feature to a button?

PixelRestrictions for minWidth and minHeight stopt working at Version 0.15.0

Hi,

setting the Pixel-Restrictions with
{ minHeight: 10, minWidth: 10, maxWidth: 480, maxHeight: 110 }

used to work up to Version 0.14.1, since Version 0.15.0 (testet it up to current version 0.16.0) setting the minWidth and minHeight is broken. The Image used is 1024x786px and I get the following error message when trying to set the default Size to 186x50px:

Warning: default size breaking size restrictions. Check your defaultSize function Object { width: 186, height: 50 } Object { minHeight: 89, minWidth: 89, maxWidth: 480, maxHeight: 110 }

Setting the max-Values still works.

Thanks in advance.

this.$refs.cropper.setCoordinates is not a function

I'm trying to use the setCoordinates function just like the documentation shows. But i'm getting the "is not a function" error on the console. It was deprecated?

I'm using the vue-advanced-cropper on ^0.8.3 version.

There's another way of setting the coordinates programmatically?

Moving image when imageRestriction set to 'none'

Hi! Thank you very much for new feature added in 0.15!

I showed new implemented feature to my collegues and they said that it is not clear/not comfortable to move background image when bounding box is covering almost whole available space. So you have to aim at small area on a side or spam mousewheel up/down trying to position it right 😃

Is that possible to add a setting (prop) which will change behavior of the stencil and allow user to drag image even when cursor is over it? (Stencil size still able to be resized by dragging its handles.)

Thank you in advance.

Get the image loading status

I was looking and I couldn't find anything related. When loading an external image it takes a while to appear, perhaps it would be nice to provide a loading event indicating so we can show a loading message?

Prop Debounce Should Be Namespaced/Scoped/Renamed

Having a global method/function in our application called debounce is conflicting with the prop debounce. Being that many of the debounce packages provide a function or methods simply named debounce(), maybe the prop could be renamed debounceTime?

Thanks for a great package.

"export 'MoveableArea' was not found in 'vue-advanced-cropper'

Hi there:
I would like to put this issue. Not sure what is going on. Can anybody help here??? Thank you