压缩思路

JS 的图片压缩，一般是需要用到 Canvas 的绘图能力，通过调整图片的分辨率或者绘图质量来达到图片压缩的效果。

实现过程

（1）获取上传 Input 中的图片对象 File；

（2）将图片转换成 base64 格式；

（3）base64 编码的图片通过 Canvas 转换压缩，这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api，一个调节图片的分辨率的，一个是调节图片压缩质量并且输出的，后续会有详细介绍
转换后的图片生成对应的新图片，然后输出。

优缺点介绍

不过 Canvas 压缩的方式也有着自己的优缺点：

优点：实现简单，参数可以配置化，自定义图片的尺寸，指定区域裁剪等等。

缺点：只有 jpeg 、webp 支持原图尺寸下图片质量的调整来达到压缩图片的效果，其他图片格式，仅能通过调节尺寸来实现

具体实现代码

<template><div class="container"><input type="file" id="input-img" @change="compress" /><a :download="fileName" :href="compressImg">下载图片</a><!-- <button @click="downloadImg">兼容 IE 下载</button> --><div><img :src="compressImg" /></div></div>
</template>
<script>
export default {name: 'compress',data: function () {return {compressImg: null,fileName: null,};},components: {},methods: {compress () {// 获取上传的图片对象// 将图片转换成 base64 格式// base64 编码的图片通过 Canvas 转换压缩，这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api，一个调节图片的分辨率的，一个是调节图片压缩质量并且输出的，后续会有详细介绍// 转换后的图片生成对应的新图片，然后输出// 获取文件对象const fileObj = document.querySelector('#input-img').files[0];// 获取文件名称，后续下载重命名this.fileName = `${fileObj.name}-${new Date().getTime()}`;// 获取文件后缀名const fileNames = fileObj.name.split('.');const type = fileNames[fileNames.length - 1];// 压缩图片this.handleCompressImage(fileObj, type);},handleCompressImage (img, type) {const vm = this;let reader = new FileReader();// 读取文件reader.readAsDataURL(img); // 转base64reader.onload = (e) => {let image = new Image()     // 新建一个img标签（不嵌入DOM节点，仅做canvas操作)image.src = e.target.result    // 让该标签加载base64格式的原图image.onload = function () {    //图片加载完毕后再通过canvas压缩图片，否则图片还没加载完就压缩，结果图片是全黑的let canvas = document.createElement('canvas') //创建一个canvas元素let context = canvas.getContext('2d')    //context相当于画笔，里面有各种可以进行绘图的API// 定义 canvas 大小，也就是压缩后下载的图片大小let imageWidth = image.width; // 压缩后图片的宽度let imageHeight = image.height; // 压缩后图片的高度// 图片也可以按照指定压缩尺寸进行压缩// let imageWidth = 500; // 压缩后图片的宽度// let imageHeight = 500; // 压缩后图片的高度canvas.width = imageWidth;canvas.height = imageHeight;// 使用drawImage重新设置img标签中的图片大小，实现压缩context.drawImage(image, 0, 0, imageWidth, imageHeight)// 图片截取指定位置载入// context.drawImage(image,100, 100, 100, 100, 0, 0, imageWidth, imageHeight);vm.compressImg = canvas.toDataURL(`image/${type}`); // 输出压缩后的base64};};},// base64 图片转 blob 后下载downloadImg () {let parts = this.compressImg.split(';base64,');let contentType = parts[0].split(':')[1];let raw = window.atob(parts[1]);let rawLength = raw.length;let uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}const blob = new Blob([uInt8Array], { type: contentType });this.compressImg = URL.createObjectURL(blob);if (window.navigator.msSaveOrOpenBlob) {// 兼容 ie 的下载方式window.navigator.msSaveOrOpenBlob(blob, this.fileName)} else {const a = document.createElement('a');a.href = this.compressImg;a.setAttribute('download', this.fileName);a.click();}},}
};
</script>