vue-simple-image-editor

DEMO https://manrajang.github.io/vue-simple-image-editor/
957 5
vue resize rotate crop image crop vue-img-simple-editor vue-image-simple-editor simple-editor img-simple-editor image-simple-editor simple editor img simple editor image simple editor image resize image rotate
Install
npm install vue-simple-image-editor
Latest Version:0.2.2
Vue:2
License:MIT
Last Updated:Jan 6, 2023
Links: GitHub  ·  npm
Maintainer: manrajang

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

Related Packages

@antdv-next/vue-easy-crop

A Vue 3 component to crop images and videos with easy interactions. Drag, zoom,...

2,004
crop image crop vue cropper vue3
es-drager

A draggable, resizable, rotatable component based on vue3

74,141 461
resize rotate drag es-drager vue-drag-resize vue-drager
@minogin/vue-drag-resize-rotate

Vue component which acts as a draggable, resizable and rotateable container for...

7,341 78
resize rotate vue drag draggable resizable rotateable
vue-drr

A Vue2 component for draggable, resizable, rotatable elements

959
resize rotate vue drag draggable drr resizable rotatable
vue-drag-resize-rotate

a vue2 component. Taking a cue from react-resizable and react-draggable.

4,610
resize rotate vue drag draggable layout resizeable rotatable vuejs

Version History

Version Released Vue License
0.2.2 ^2.6.11 MIT
0.2.1 ^2.6.11 MIT
0.1.9 ^2.6.11 MIT
0.1.8 ^2.6.10 MIT
0.1.7 ^2.6.10 MIT