vue-canvas-compression

利用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.

zhangyukuan / vue-canvas-compression Goto Github PK