Compress Image Files with Vue 2 Image Compressor
vue-image-compressor
A Vue Component to help you compress image files on the browser. It is based on cpol-image.
Example
Install
npm install vue-image-compressor
Note: devDependencies require babel plugin for vue 2.0 jsx
App.vue
<template>
<button @click="upload">Upload</button>
<image-compressor
:done="getFiles"
:scale="scale"
:quality="quality">
</image-compressor>
<div class="text-center" v-if="img">
<img v-if="img" src="" alt="" :src="img">
</div>
</template>
<script>
import imageCompressor from 'vue-image-compressor'
export default {
data(){
return{
img: "",
scale: 100,
quality: 50,
originalSize: true,
original: {},
}
},
components: { imageCompressor },
methods: {
upload () {
let compressor = this.$refs.compressor.$el
compressor.click()
},
getFiles(obj){
this.img = obj.compressed.blob
this.original = obj.original
this.compressed = obj.compressed
},
}
};
</script>
Props are
- done (Function)
Callback after Compress the image. It will pass original file and compressed file and also the canvas element.
- scale (Number)
From 1 to 100.
- quality (Number)
From 1 to 100.
GitHub. Created by @BosNaufal