igg-vue-image-cropper

Install

npm install igg-vue-image-cropper
// or
yarn add igg-vue-image-cropper

Simple Usage

<template>
  <div>
    <igg-vue-image-cropper @change="onChange" />
  </div>
</template>

<script>

export default {
  methods: {
    onChange (data) {
      console.log(data)
    }
  }
}
</script>

Plugin

import Vue from 'vue'
import IggVueImageCropper from 'igg-vue-image-cropper'
import 'igg-vue-image-cropper/dist/igg-vue-image-cropper.css'

Vue.use(IggVueImageCropper)

Props

| Prop | Type | Default | Description | | -------------------| -----------| ---------------------------------|-------------| | size | number | 5 | size limit of file | | name | string | '' | name for input file | | preview | string | '' | preview image url | | imageName | string | '' | name of image | | dataCy | string | 'upload-image' | dataCy for test | | boundaryWidth | number | 500 | width for cropper | | boundaryHeight | number | 500 | height for cropper | | placeholder | string | '' | placeholder for cropper | | maxHeightPreview | number | 500 | height width for preview | | modalTitleMessage | string | 'ปรับขนาดภาพ' | message for title in modal | | sizeMessage | string | 'ขนาดไฟล์ไม่เกิน' | message for size in modal | | supportFileMessage | string | 'รองรับไฟล์ .jpg และ .png ขนาด : ' | message for support file in modal | | cancelBtnMessage | string | 'ยกเลิก' | message for button cancel in modal | | submitBtnMessage | string | 'บันทึก' | message for button submit in modal |

Events

| Prop | Response | Description | | -------------| ------------------------|-------------| | change | { file, crop, preview } | change when data changing | | errorSize | size | error size |