Vue-simple-image-editor NPM

vue-image-simple-editor

DEMO

https://manrajang.github.io/vue-simple-image-editor/

Install

import Vue from 'vue'
import VueSimpleImageEditor from 'vue-simple-image-editor'

Vue.use(VueSimpleImageEditor)

Example

<div>Resize &amp; Crop Mode</div>
<button type="button" @click="onClickSaveImageFileInMutliMode">Save Image File (Multi)</button>
<simple-image-editor ref="multiCanvas" style="border: 1px solid red;" :width="1000" :height="1000" :imageSrc="imageSrc" :imageObj="imageObj" :cropWidth="200" :cropHeight="200" @changeImage="onChangeImage"/>

<div>Resize &amp; Crop Mode (Fix)</div>
<button type="button" @click="onClickSaveImageFileInMutliModeWithFixedCrop">Save Image File (Multi)</button>
<simple-image-editor ref="multiCanvasWithFixedCrop" style="border: 1px solid red;" :width="1000" :height="1000" :imageSrc="imageSrc" :imageObj="imageObj" :cropWidth="200" :cropHeight="200" isFixedCrop @changeImage="onChangeImage"/>

<div>Resize Mode</div>
<button type="button" @click="onClickSaveImageFileInResizeMode">Save Image File (Resize)</button>
<simple-image-editor ref="resizeCanvas" style="border: 1px solid red;" :width="1000" :height="1000" :imageSrc="imageSrc" :imageObj="imageObj" isResizeMode @changeImage="onChangeImage"/>

<div>Crop Mode</div>
<button type="button" @click="onClickSaveImageFileInCropMode">Save Image File (Crop)</button>
<button type="button" @click="onClickSaveCrop">Save Crop</button>
<simple-image-editor ref="cropCanvas" style="border: 1px solid red;" :width="1000" :height="1000" :imageSrc="imageSrc" :imageObj="imageObj" isCropMode @changeImage="onChangeImage"/>

<div>Crop Mode (Fix)</div>
<button type="button" @click="onClickSaveImageFileInCropModeWithFixedCrop">Save Image File (Crop)</button>
<button type="button" @click="onClickSaveCropWithFixedCrop">Save Crop</button>
<simple-image-editor ref="cropCanvasWithFixedCrop" style="border: 1px solid red;" :width="1000" :height="1000" :imageSrc="imageSrc" :imageObj="imageObj" isCropMode :cropWidth="200" :cropHeight="200" isFixedCrop @changeImage="onChangeImage"/>

import VueSimpleImageEditor from 'vue-simple-image-editor'

components: {
  VueSimpleImageEditor
}

Props

Prop	Type	Default	Description
width	Number	500	Image Width (required)
height	Number	500	Image Height (required)
imageSrc	String	null	Image Path
imageObj	Image	null	Image Object
isResizeMode	Boolean	false	Only Resize Mode
isCropMode	Boolean	false	Only Crop Mode
isFixedCrop	Boolean	false	Fixed Crop (Do Not Resize)
resizeHandlerStyle	Object	DEFAULT_RESIZE_HANDLER_STYLE	Reisze Handler Style
cropHandlerStyle	Object	DEFAULT_CROP_HANDLER_STYLE	Crop Handler Style
cropButtonText	String	'Crop'	Crop Button Text
cropButtonStyle	Object	null	Crop Button Style
cropSaveButtonText	String	'Save Crop'	Crop Save Button Text
cropSaveButtonStyle	Object	null	Crop Save Button Style
cropCancelButtonText	String	'Cancel Crop'	Crop Cancel Button Text
cropCancelButtonStyle	Object	null	Crop Cancel Button Style
cropWidth	Number	0	Crop Width
cropHeight	Number	0	Crop Height

DEFAULT_RESIZE_HANDLER_STYLE

Prop	Type	Default	Description
strokeColor	String	#FF0000	Resize Stroke Color
strokeWidth	Number	2	Resize Stroke Width
handlerFillColor	String	#FF0000	Resize Handler Fill Color
handlerSize	Number	7	Resize Handler Size

DEFAULT_CROP_HANDLER_STYLE

Prop	Type	Default	Description
strokeColor	String	#FF0000	Resize Stroke Color
strokeWidth	Number	2	Resize Stroke Width
handlerFillColor	String	#000000	Resize Handler Fill Color
handlerSize	Number	7	Resize Handler Size
fillColor	String	#C0C0C0	Crop Fill Color
fillAlpha	Number	0.3	Crop Fill Alpha