android 本地文件压缩转base64_谈谈JS 的图片压缩

前言

说起图片压缩，大家想到的或者平时用到的很多工具都可以实现，例如，客户端类的有图片压缩工具 PPDuck3， JS 实现类的有插件 compression.js ，亦或是在线处理类的 OSS 上传，文件上传后，在访问文件时中也有图片的压缩配置选项，不过，能不能自己撸一套  JS 实现的图片压缩代码呢？当然可以，那我们先来理一下思路。

压缩思路

涉及到 JS 的图片压缩，我的想法是需要用到 Canvas 的绘图能力，通过调整图片的分辨率或者绘图质量来达到图片压缩的效果，实现思路如下：

• 获取上传 Input 中的图片对象 File
• 将图片转换成 base64 格式
• 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() {
    // 获取文件对象const fileObj = document.querySelector('#input-img').files[0];// 获取文件名称，后续下载重命名this.fileName = `${
    new Date().getTime()}-${fileObj.name}`;// 获取文件后缀名const fileNames = fileObj.name.split('.');const type = fileNames[fileNames.length-1];// 压缩图片this.handleCompressImage(fileObj, type);
    },
    handleCompressImage(img, type) {
    const vm =