JavaScript 压缩图片

上传图片时候，遇到要上传很大的图片，上传的时候就会很慢。所以，需要对图片进行压缩处理来优化上传功能。

图片压缩函数：

/* * 图片压缩* img    原始图片* width   压缩后的宽度* height  压缩后的高度* ratio   压缩比率 */function compress(img, width, height, ratio) {        var canvas, ctx, img64;canvas = document.createElement('canvas');        canvas.width = width;canvas.height = height;ctx = canvas.getContext("2d");        ctx.drawImage(img, 0, 0, width, height);img64 = canvas.toDataURL("image/jpeg", ratio);return img64;}

图片压缩函数，返回 base64 格式的图片数据。其中压缩比率ratio取值（0 - 1 之间），ratio越大图片质量越高。

这里将图片转为 jpeg格式，因为转为 png 格式的话，图片的 base64 比转为 jpeg 的要长不少。

<input type="file" accept="image/*" name="imageFile" @change="upload">

上传图片后 @change绑定的upload 函数将被触发，在这个函数中获取到图片的资源，将它压缩并利用canvas绘制出来。

  upload () {let file = document.querySelector('input[type=file]').files[0] // 获取选择的文件，这里是图片类型let reader = new FileReader()reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式reader.onload = (e) => { // 文件读取完成时触发let result = e.target.result // base64格式图片地址var image = new Image()image.src = result // 设置image的地址为base64的地址image.onload = () => { // 图片加载完成后才能进行压缩处理，从而转换为base64 进行赋值let width = image.width // 图片宽度let height = image.heightlet dataUrl = this.compress(image, width, height, 0.7)document.getElementById("test").src = dataUrl}}}

压缩图片结果对比：
大小对比：
在这里插入图片描述
分辨率对比：

压缩2M的图片：

大小对比：
在这里插入图片描述

分辨率对比：
在这里插入图片描述

demo完整版代码：

<template><div><input type="file" accept="image/*" name="imageFile" @change="upload"><img id="test" crossorigin alt=""></div>
</template>
<script>
export default {name: '',data () {return {}},components: {},created () {},methods: {upload () {let file = document.querySelector('input[type=file]').files[0] // 获取选择的文件，这里是图片类型let reader = new FileReader()reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式reader.onload = (e) => { // 文件读取完成时触发let result = e.target.result // base64格式图片地址var image = new Image()image.src = result // 设置image的地址为base64的地址image.onload = () => { // 图片加载完成后才能进行压缩处理，从而转换为base64 进行赋值let width = image.width // 图片宽度let height = image.heightlet dataUrl = this.compress(image, width, height, 0.7)document.getElementById("test").src = dataUrl}}},/** 图片压缩* img   原始图片* width  压缩后的宽度* height  压缩后的高度* ratio  压缩比率*/compress (img, width, height, ratio) {let canvas, ctx, img64;canvas = document.createElement('canvas')canvas.width = width;canvas.height = height;ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, width, height);img64 = canvas.toDataURL("image/jpeg", ratio);return img64;}}
}
</script><style lang="less" scoped>
</style>