ratioClip and ratioWrap

[suenot]

This wonderful plugin needs additional options for clipper-basic /

I have a situation when I need to have a clipper ratio and a clip-area should be different. To prevent the clip-area from going beyond the image
Now there is a prop ratio - which applies to both the clipper and the clip-area
I would like to be able to exhibit various ratio
For example ratioClip and ratioWrap

[suenot]

I made this changes in method.js:

  setRatioWH: function ({ width, height, maxWidth, maxHeight, left, top, right, bottom }) {
    if (!this.ratioWrap) return { width, height, left, top, right, bottom }
    // 有設定比例的話進行調整
    const ratioPos = this.ratioPos({ width, height })
    if (ratioPos.x) {
      height = Math.min(width / this.ratioWrap, maxHeight)
      width = (height === maxHeight) ? height * this.ratioWrap : width
    } else {
      width = Math.min(height * this.ratioWrap, maxWidth)
      height = (width === maxWidth) ? width / this.ratioWrap : height
    }
    return { width, height, left, top, right, bottom }
  },

in clipper-basic.vue:

props: {
    ratioWrap: {
      type: Number,
      default: NaN
    },
}

It almost solved my problem. I don’t understand how to make the clip-area accept the desired ratio from the start. It takes the required ratio at the first resize. But does not accept the new ratio when moving the clip-area. Also, after it has taken a new position, there are problems with moving and resizing.

[suenot]

How can I trigger a zoom of clip-area?
After the zoom plugin works as I need.

[timtnleeProject]

If clip-area's size is based on/bind to ratioWrap property, you can change ratioWarp to resize the clip-area in the reactive way.

[suenot]

ratioWrap is computed and it doesnt make effect. Ill make demo soon

[suenot]

https://github.com/suenot/vuejs-clipper-demo/blob/master/src/views/Cropper.vue

[suenot]

Need to install packages with yarn, because used yarn workspace for connection with vuejs-clipper package source.

[suenot]

All my changes in package I create in separated commit: suenot/vuejs-clipper-demo@d5a42b6

[suenot]

upd. demo updated. fixed wrong path to demo img

[timtnleeProject]

I've made a beta version at beta branch, this will be the next published version after I update documents and getting feedbacks from you.

I add three new props wrapRatio, initWidth and initHeight for clipper-basic

<clipper-basic 
  :ratio="1/1"
  :warpRatio="4/3"
/>

Please look at demo (you might need to release old browser cache to see the new release immediately.) to see how these props work.

I will update the document soon to give a more clear perspective of these props and how clipper-basic works.

[suenot]

this is not expected behaviour. clip area should not move outside clipper.

[suenot]

I'm steel trying to just trigger zoom to engage setRatioWH from method.js :)

[timtnleeProject]

You can set wrapRatio same as the image's ratio (naturalWidth/naturalHeight), then the clip box would not move outside the area.

[suenot]

Thats the main problem, image and clip-area ratio often will be different. In my case.

[suenot]

So sorry, I misunderstand your post. Great! It is solution for my case!

[suenot]

I will try it now on my demo.

[suenot]

suenot/vuejs-clipper-demo@5822257
It WORKS! You are amazing!

[timtnleeProject]

Great! 👍
I'll publish it after I update documents, it might take days.

[timtnleeProject]

Version 1.0.1 published