search

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
933 stars 130 forks source link

zoom using slider #131

Closed vortechron closed 3 years ago

vortechron commented 3 years ago

zoomFactor data bind with slider, but it seems not working, the zoom is not smooth. Cant find an example on how to implement it.

    watch: {
        zoomFactor(value, old) {
            if (old > value) {
                this.$refs.cropper.zoom(0.5)
            } else {
                this.$refs.cropper.zoom(2)
            }
        }
    },
Norserium commented 3 years ago

@vortechron, I assume, that the problem in the transitions, that obviously are not needed in your case.

<cropper 
    :src="image"
    :transitions="false"
/>

By the way, creating the zoom slider is not a trivial task, because the cropper doesn't has the absolute zoom, it has only the relative zoom. It's deliberate decision because it's obviously unclear what's 1 or 0.5 zoom for different images and different restrictions that could be customized.

So, at least now, you should define what is the absolute zoom by yourself.

Luckily, I've created the example that reproduces the Twitter cropper with the slider before, so you can just copy-paste my logic.

vortechron commented 3 years ago

perfect, just what I need! tq man @Norserium