Igg-vue-image-cropper NPM

igg-vue-image-cropper

npm.io

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