Vue v2.4.4

[gguney]

Component is not working. I try to use it but nothing. When I try to upload an image it shows empty canvas and there is no error, cropper area shows 0x0 and I can not move it.

Then I try to rotate and nothing again. No error nothing.

Thanks in advance.

[xyxiao001]

You should set out div width and height

[gguney]

Hello,

Can you be more specific? I've use it without a width or height specified. However, after updating it no luck it is not working. Even there is preloaded image it is not previewing anything

[xyxiao001]

Can you Show your code

[gguney]

My Component is quite long however this the part where I use cropper:

            <vueCropper
                    ref="cropper"
                    :img="option.img"
                    :outputSize="option.size"
                    :outputType="option.outputType"
                    :info="true"
                    :full="option.full"
                    :canMove="option.canMove"
                    :canMoveBox="option.canMoveBox"
                    :fixedBox="option.fixedBox"
                    :original="option.original"
                    :autoCrop="option.autoCrop"
                    :autoCropWidth="option.autoCropWidth"
                    :autoCropHeight="option.autoCropHeight"
                    @realTime="realTime"
            ></vueCropper>

and my data function in vue:

    data: function () {
        return {
            crap: true,
            imageId: null,
            image: null,
            isLoading: false,
            isSaving: false,

            hasChange: false,
            previews: {},
            option: {
                img: '',
                size: 1,
                full: true,
                canScale: true,
                outputType: 'jpeg',
                canMove: false,
                fixedBox: false,
                original: false,
                canMoveBox: true,
                autoCrop: true,
                autoCropHeight: 100,
                autoCropWidth: 100,
            },
            downImg: '#'
        }
    },

[gguney]

This is the file

[xyxiao001]

You can see http://xyxiao.cn/vue-cropper/example/

[gguney]

I'm using component inside a modal. Actually preview is outside of a modal and real component is inside of a modal. It was working before however now it does not. I really like this component. Somewhat it is now broken because of new version of Vue I guess. Preview is not working and I can not event rotate the image.

I started with your example but I go far far from it.

[xyxiao001]

Use v-if

[xyxiao001]

When your pop-up appears, rerender the screenshot plug-in.

[gguney]

Autocrop height and size is not working it shows 0x0 and i can not resize it. If I use v-if my image select button at outside of the component (modal). So If I use v-if when I choose an image vue-cropper won't be rendered so it will stuck.

[gguney]

Crop area is not working properly, so the preview is not shown.

I changed cropW cropH from VueDev tool then preview showed. However, when I try to resize crop area it reset itself to 0x0 I guess there is a problem with it.

Also, when I try to select new Image It is way off the canvas. I have to use zoom then it placed the canvas but like 1x1px. I guess it does not init the option variable.

Did you try this with newer version of Vue? Some of my other components require newer version of Vue that's why I have to update Vue.

Maybe the problem is that the component inside of the modal. However, how can I force render this component or force init?

[gguney]

I solved it. Actually problem is when you use the component inside of a modal. If the modal content is hidden then component wont initialize. However, If I only hide modal wrapper then there is no problem.

Thanks for your help.