利用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>
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 />
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>
The MIT License (MIT). Please see License File for more information.