img-crop

image cropper component

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

Props

    autoCropWidth: {    //Set Cropper Width
        type: Number,
        default: 200,
        required: false
    },
    autoCropHeight: {   //Set Cropper Height
        type: Number,
        default: 200,
        required: false
    },
    zoom: {     //Set Number of Zoom multiple
        type: Number,
        default: 0,
        required: false
    },
    defaultPreview: {   //Show or Hide Preview 
        type: Boolean,
        default: true,
        required: false
    },
    circlePreview:{    //Show or Hide Circle Preview
        type: Boolean,
        default: true,
        required: false
    },
    squarePreview:{      //Show or Hide Square Preview
        type: Boolean,
        default: true,
        required: false
    },
    defaultBtns: {  //Show or Hide button of upload & clear 
        type: Boolean,
        default: true,
        required: false
    },
    defaultImgUrl: {    //Set default Image
        type: [String, Blob, null, File],
        default: "",
        required: false
    }

Event

cropChange: Get base64 of image that was been cropped
eg: cropChange(val){
        console.log('cropped base64:'+val);
    }

save: Get base64 of image that was been cropped (redundance)
eg: save(val){
        console.log('cropped base64:'+val);
    }

NOTE

the nolly-img-crop component's upload & clear buttons are also componets base on vant, so you should install and import vant package before run nolly-img-crop component.