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.

Demo

GitHub. Created by @BosNaufal