Vue Image Compressor
Vue Component To Compress Image Files. It's based on cpol-image and others references
Install
You can import vue-image-compressor.vue to your vue component file like this and process it with your preprocessor.
You can install it via NPM
npm install vue-image-compressor
Or Just put it after Vue JS~
<script src="https://vuejs.org/js/vue.min.js"></script> <script src="./dist/vue-image-compressor.js"></script>
Import Module
import imageCompressor from 'vue-image-compressor' // Or var imageCompressor = require('vue-image-compressor');
Usage
<template> <image-compressor :done="getFiles" :scale="scale" :quality="quality"> </image-compressor> </template> <script> import imageCompressor from 'vue-image-compressor'; export default { components: { imageCompressor }, methods: { getFiles(obj){ console.log(obj); } } }; </script>
Props
done (Function)
Callback after Compress the image. It will pass original file and compressed file and also the canvas element. The object pretty complete with blob and base64 and other needed information.
scale (Number)
The percentage of image scaling it starts from 1 to 100.
quality (Number)
The percentage of image quality it starts from 1 to 100.
Credits
- https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
- https://davidwalsh.name/convert-canvas-image
- https://beta.webcomponents.org/element/3mp3ri0r/cpol-image
Thank You for Making this useful~
Let's talk about some projects with me
Just Contact Me At:
- Email: [email protected]
- Skype Id: bosnaufal254
- twitter: @BosNaufal
License
MIT Copyright (c) 2016 - forever Naufal Rabbani