jofftiquez / vue-croppie

Vue wrapper for croppie
https://jofftiquez.github.io/vue-croppie/
MIT License
260 stars 42 forks source link

Example not working, fix suggested #70

Closed pintoflager closed 4 years ago

pintoflager commented 4 years ago

After installing and trying with the example provided I didn't see any loaded images in the container until setting croppie container height and width with browser developer tools to px numbers.

Problem was fixed by setting the boundary attribute as per example below.

`<vue-croppie :key="index" :ref="'c' + index" :boundary="{ width: 300, height: 300}" :viewport="{ width: 230, height: 230 , type: 'circle'}" :enableResize="false" :enableOrientation="true"

`

jofftiquez commented 4 years ago

@pintoflager Thanks for using this plugin. What exactly do we need to address?

pintoflager commented 4 years ago

Hi and thanks for your work on the plugin!

The example you have in the front page of this project here in github gives empty croppie with resizer.

In the example vue-croppie is defined like this:

<!-- Note that 'ref' is important here (value can be anything). read the description about `ref` below. -->
        <vue-croppie 
            ref="croppieRef" 
            :enableOrientation="true"
            @result="result"
            @update="update">
        </vue-croppie>

I would suggest adding the "boundary" configuration to to prevent bad start with the plugin for people who are experimenting with the example provided. vue-croppie with boundary:

<!-- Note that 'ref' is important here (value can be anything). read the description about `ref` below. -->
        <vue-croppie 
            ref="croppieRef" 
            :enableOrientation="true"
            :boundary="{ width: 300, height: 300}"
            @result="result"
            @update="update">
        </vue-croppie>

That just makes sure croppie is visible no matter the container size it get's thrown into.

jofftiquez commented 4 years ago

Hello @pintoflager you are definitely right. I will add this to the documentation. Thank you so much!

jofftiquez commented 4 years ago

Updated the docs @pintoflager thanks!