advanced-cropper / vue-advanced-cropper

The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
https://advanced-cropper.github.io/vue-advanced-cropper/
Other
930 stars 128 forks source link

Set position of fixed stencil #282

Open M-Barari opened 6 days ago

M-Barari commented 6 days ago

Hi, I'm using fixed stencil type

<cropper
  ref="cropper"
  :src="imgSrc"
  :stencil-props="{
      aspectRatio: 1,
      handlers: {},
      movable: false,
      resizable: false,
  }"
  imageRestriction="stencil"
  :resizeImage="{
      touch: true,
      wheel: {
          ratio: 0.1
      },
      adjustStencil: false
  }"
  :stencil-size="stencilSize"
  :default-boundaries="defaultBoundaries"
  @change="change"
  />
stencilSize({boundaries}) {
    return {
        width: boundaries?.width - 48,
        height: boundaries?.width - 48,
    }
},
defaultBoundaries({cropper, imageSize}){
    const el = document?.getElementById('modalBody')
    const maxHeight = window?.getComputedStyle(el)?.maxHeight
    const strecher = document.querySelector('.vue-advanced-cropper__stretcher')
    const height = Math.min(cropper.clientWidth+this.actionBoxHeight, parseInt(maxHeight, 10))
    if(strecher) strecher.style.height = height + 'px'
    return {
        width: cropper.clientWidth,
        height: height,
    }
},

I want the Stencil be at the top of canvas/boundaries with a 24px space from top and sides. but it is always at center. is there a way to achieve that?? I'm also gonna use defaultPosition to set a coordinate on opened image. but the stencil must still be fixed at top and the image must move to that coordinate. is it possible at all???