v-img-cropper

vue image cropper

💪 Easy to crop and resize your picture before upload.

Basic usage

<v-img-cropper
  type="primary"
  title="Crop your new profile picture"
  @message="handlerMessage"
/>

Installation

Node environment

1. Install the package:

   npm install v-img-cropper
   # or
   yarn add v-img-cropper

2. Register it:

   import VImgCropper from "v-img-cropper";
   
   // or
   const VImgCropper = require('v-img-cropper');
   
   
   Vue.component(VImgCropper);
   
   //or
   new Vue({
       components: { VImgCropper },
       // ... 
   });

Props

Property Name	Type	Description
title	String	The Title in crop modal.
label	String	Lable for imput choose file.
type	String	Color type follow bootstrap color. Allowed: primary,success,secondary,danger,warning,info,light,dark,default default: primary
accept	String	Allowed image formats, default: image/png, image/jpeg, image/jpg
size	Number	Max file size can select (MB), default: 1
exportType	String	Export type. Allowed:Base64 , Blob .default: Base64
outputQuality	Number	A Number between 0 and 1 indicating image quality if the requested . default: 0.92
outputType	String	Image export type file, default: image/jpeg
btnsize	String	Size for button on Crop Modal. Allowed: lg,sm
outline	Boolean	Is button outline on Crop Modal, default: false
cancel	String	Text on Cancel button in Modal
submit	String	Text on Submit button in Modal

Events

• message return all message and result, params:
  • e The Object message return: { Status: "False", Message: err, Data: {} }

Example:

    <v-img-cropper
    type="primary"
    title="Crop your new profile picture"
    @message="handlerMessage"
    />

export default{
  methods: {
    handlerMessage(e) {
      //Status return ["Pass | False"]
      if (e.Status == "Pass") { 
        //Data return (base64 | blob)
        console.log(e.Data);
        var image = new Image();
        image.onload = function() {
        };
        image.src = e.Data; 
        var preview = document.getElementById("preview");
        preview.removeChild(preview.childNodes[0]);
        preview.appendChild(image);
      } else {
        //Message return
        console.log(e.Message);
        alert(e.Message);
      }
    },
  },
}

License

MIT