利用canvas压缩图片并支持上传到指定服务器的vue组件。 支持配置 压缩百分比 图片宽度 输出图片的类型 支持选择的图片类型 其他扩展待完善...

安装使用

$ npm install --save vue-canvas-compression

全局注册组件

//main.js
import Vue from 'vue'
import VueCanvasCompression from 'vue-canvas-compression'

Vue.component('VueCanvasCompression', VueCanvasCompression)

局部注册组件

<template>
  <div id="app">
    <vue-canvas-compression
      @getOriginal="getOriginal"
      @success="success"
      @error="error"
      :preview="true"
      :width='200'
    >
      <button>上传图片</button>
    </vue-canvas-compression>
  </div>
</template>

<script>
import VueCanvasCompression from 'vue-canvas-compression'
export default {
  name: 'app',
  components:{
    VueCanvasCompression
  },
  methods: {
    getOriginal: function (file) {
      console.log('原始图片信息', file);
    },
    success(file) {
      console.log('压缩后图片信息', file);
    },
    error(e) {
      console.log(e);
    }
  },
}
</script>

<style>
</style>

Props

accept 类型: String必需: false默认: image/*

可选的图片类型。

<vue-canvas-compression accept="image/*" @success="success" />

width 类型: Number必需: false默认: 0

当不传width时图片保留原始尺寸。

<vue-canvas-compression :width="200" />

quality 类型: Number必需: false默认: 1

定义压缩比例。

<vue-canvas-compression :quality="0.8" />

preview 类型: Boolean 必需: false 默认: false

是否展示压缩前后的图片。

<vue-canvas-compression preview />

Events

getOriginal 参数: params

返回参数是一个File,里面包含原始的图片信息。

success 参数: params

返回参数是一个Object,里面包含压缩后的file文件信息。

error 参数: params

返回参数是一个Object,里面包含压缩失败的错误信息。

<template>
  <div id="app">
    <vue-canvas-compression
      @getOriginal="getOriginal"
      @success="success"
      @error="error"
      :preview="true"
      :width='200'
    />
  </div>
</template>

<script>
import VueCanvasCompression from 'vue-canvas-compression'

export default {
  name: 'app',
  components: {
    VueCanvasCompression
  },
  methods: {
    getOriginal: function (file) {
      console.log('原始图片信息', file);
    },
    success(file) {
      console.log('压缩后图片信息', file);
    },
    error(e) {
      console.log(e);
    }
  },
}
</script>

License

The MIT License (MIT). Please see License File for more information.