weblineindia/vue-image-crop-upload

A Vue component for image cropping and uploading.

Vue-Image-Crop-Upload

A Vue.js component for Image-Upload.

Table of contents

• Browser Support
• Demo
• Getting started
• Usage
• Available Props
• Want to Contribute?
• Need Help / Support?
• Online Demo
• Changelog
• Credits
• License
• Keywords

Browser Support

83.0 ✔	77.0 ✔	13.1.1 ✔	83.0 ✔	11.9 ✔

Demo

Getting started

Install the npm package:

npm install vue-weblineindia-image-crop-upload
#OR
yarn add vue-weblineindia-image-crop-upload

need css loader, ex: sass-loader, if you haven't installed :

npm install -D sass-loader node-sass
#OR
yarn add -D sass-loader node-sass

Usage

Use the <vue-weblineindia-image-crop-upload> component:

<template>
  <div>
  <VueImageUpload/>
  </div>
</template>

<script>
// import vue-weblineindia-image-crop-upload
import VueImageUpload from 'vue-weblineindia-image-crop-upload'

export default {
  components: {
    VueImageUpload,
  },
}
</script>

Available Props

Prop	Type	default	Description
value	String		Set blob url
id	String		Id of the component
isCrop	boolean	true	Enables crop image
isRoundCrop	boolean	true	Use a round clipping area, this only effect the component layout, clipping results are still rectangular
acceptedFiles	Array	image, image/jpeg, image/jpg, image/png, png	Set image type
disableButton	boolean	false	Set disable button
buttonName	String	Upload image	Set image upload button name
imagesize	Number	5000000 byte	Set size of image (byte)
imageUploadErrorMessage	String	Only jpg, jpeg and png are allowed.	Image format error message
imageSizeErrorMessage	String	Failed to upload an image. The image maximum size is 5MB.	Image Size error message
invalidImageErrorMessage	String	The uploaded image is not valid.	Invalid image error message
isLandscape	boolean	false	Set landscape image
isPortrait	boolean	false	Set Portrait image

Want to Contribute?

• Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
• Fork it.
• Create new branch to contribute your changes.
• Commit all your changes to your branch.
• Submit a pull request.

---

Need Help?

We also provide a free, basic support for all users who want to use this VueJS Image Upload in their software project. In case you want to customize this Image Upload to suit your development needs, then feel free to contact our VueJS developers.

---

Online Demo of VueJS Image crop upload

We have also hosted this code on our website for a quick DEMO. Please click here for the demo of VueJS Image Crop Upload online.

---

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

Credits

vue-weblineindia-image-crop-upload is inspired by the vuejs-clipper.

License

MIT

Keywords

vue, vue-weblineindia-image-crop-upload,vue-image-upload,vue,image-crop,vue-image-crop-upload