Vue Component To Compress Image Files Via Client Side. https://bosnaufal.github.io/vue-image-compressor
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build First Commit Dec 27, 2016
dist First Commit Dec 27, 2016
src/js Disable Multiple Upload Dec 28, 2016
.babelrc First Commit Dec 27, 2016
.gitignore First Commit Dec 27, 2016
LICENSE First Commit Dec 27, 2016
README.md First Commit Dec 27, 2016
index.html Fix Typo Dec 27, 2016
package.json 1.0.2 Dec 27, 2016
webpack-bundle.config.js First Commit Dec 27, 2016
webpack-prod.config.js First Commit Dec 27, 2016
webpack.config.js First Commit Dec 27, 2016
yarn.lock First Commit Dec 27, 2016

README.md

Vue Image Compressor

Vue Component To Compress Image Files. It's based on cpol-image and others references

DEMO

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

Thank You for Making this useful~

Let's talk about some projects with me

Just Contact Me At:

License

MIT Copyright (c) 2016 - forever Naufal Rabbani