Agontuk/vue-cropperjs

Fixed crop area movable image

larsjanssen6 opened this issue · 2 comments

larsjanssen6 commented

Hi,

I can't get this working:

The crop area to be fixed and the image movable.

Tried this:

<vue-cropper
        v-if="image_path"
        ref="cropper"
        :src="image_path"
        :aspect-ratio="640 / 320"
        :auto-crop-area="0.6"
        drag-mode="crop"
        :dashed="false"
        :movable="false"
        :crop-box-resizable="false"
        :cropMove="form.image_cropped_data"
        alt="Profiel afbeelding"
>
</vue-cropper>

It must be possible because I can see a demo here.

see example (Cropper with fixed dragger)

But it won't work. The crop area is still movable and the image not.

Any idea?

larsjanssen6 commented

Never mind. This is the solution for a fixed crop area:

<vue-cropper
        v-if="image_path"
        ref="cropper"
        :src="image_path"
        :aspect-ratio="4/4"
        drag-mode="move"
        :view-mode="1"
        :movable="true"
        :crop-box-movable="false"
        :crop-box-resizable="false"
        :cropMove="form.image_cropped_data"
        alt="Profiel afbeelding"
>
</vue-cropper>

Hope it's useful for someone in the future :)

  • ❤️1