Rotate not working on v1.3.2

[arslanhashmi]

This is how I am using Cropper

<button class="button" @click="rotate('90')">Rotate Right</button>
<cropper
      ref="cropper"
      class="cropper"
      :src="img"
      :min-height="400"
      :min-width="400"
      @change="change"
      image-restriction="fill-area"
      default-boundaries="fill"
     :transitions="true"
      :stencil-size="{
        width: 280,
        height: 280
      }"
      :stencil-props="{
        aspectRatio: 1,
      }"
    ></cropper>

Data and methods

data() {
    return {
      img: 'https://images.pexels.com/photos/226746/pexels-photo-226746.jpeg',
      result: {image: null, coordinates: null}
    }
  },
  methods: {
    rotate(angle) {
      this.$refs.cropper.rotate(angle)
    },
}

Traceback on rotate:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0."

found in

---> <Cropper>
       <Home> at src/views/Home.vue
         <App> at src/App.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3888
update @ index.es.js?a2c1:21
h @ index.es.js?a2c1:7
setTimeout (async)
c @ index.es.js?a2c1:7
onChange @ index.es.js?a2c1:21
rotate @ index.es.js?a2c1:21
rotate @ Home.vue?76f2:188
click @ Home.vue?c728:30
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at eval (webpack-internal:///./node_modules/vue-advanced-cropper/dist/index.es.js:39:64198)
    at VueComponent.updateCanvas (webpack-internal:///./node_modules/vue-advanced-cropper/dist/index.es.js:39:64262)
    at Object.get canvas [as canvas] (webpack-internal:///./node_modules/vue-advanced-cropper/dist/index.es.js:39:59905)
    at VueComponent.change (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Home.vue?vue&type=script&lang=js&:211:26)
    at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1853:26)
    at VueComponent.invoker (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2178:14)
    at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1853:26)
    at VueComponent.Vue.$emit (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3882:9)
    at VueComponent.update (webpack-internal:///./node_modules/vue-advanced-cropper/dist/index.es.js:39:64312)
    at h (webpack-internal:///./node_modules/vue-advanced-cropper/dist/index.es.js:25:936)

Also for same configuration zooming in and zooming out are so slow, but I can open a separate issue for it.

[Norserium]

@arslanhashmi, could you make codesandbox to reproduce this error?

[Norserium]

Also, try to update to 1.3.3. I fixed one bug, that was able to lead to your problems.

[Norserium]

@arslanhashmi, any news?

[Norserium]

@arslanhashmi I close issue. The described bug should be fixed in last versions. But if it doesn't, feel free to reopen.