创建compressImage.js
export function compressImage (file, config) {
let fileName = file.name
const read = new FileReader()
read.readAsDataURL(file)
return new Promise(function (resolve, reject) {
read.onload = function (e) {
let img = new Image()
img.src = e.target.result
img.onload = function () {
let w = config.width
let h = config.height
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let base64
canvas.setAttribute('width', w)
canvas.setAttribute('height', h)
ctx.drawImage(this, 0, 0, w, h)
base64 = canvas.toDataURL(file['type'], config.quality)
let fileBinary = dataURLtoFile(base64, fileName)
resolve(fileBinary)
}
}
})
};
function dataURLtoBlob (dataurl) {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
function dataURLtoFile (dataurl, fileName) {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], fileName, { type: mime })
}
在要压缩图片的demo.vue里导入
<template>
<div>
<input @change="getImgUrl($event)" ref="file" title='' type="file" accept="image/jpg,image/png,image/PNG,image/JPG" class="hiddenInput"/>
</div>
</template>
<script>
import { compressImage } from '../utils/compressImage'
export default {
name: 'personal',
data () {
logoUrl:''
},
methods: {
getImgUrl: function (e) {
this.logoUrl = e.target.files[0]
console.log(this.logoUrl)
let config = {
width: 100,
height: 100,
quality: 1
}
compressImage(e.target.files[0], config)
.then(result => {
console.log(result)
})
}
}
}
</script>