JavaScript前端图片压缩技术：Canvas实现与IE兼容方案

本文详细介绍前端 JavaScript 实现图片压缩的核心原理与具体代码实现，供开发者参考学习。

前言

谈及图片压缩，市面上已有众多成熟工具，包括客户端软件如 PPDuck3、JS 插件 compression.js，以及 OSS 上传后的自动压缩配置。然而，是否可以在前端自行编写一套 JS 图片压缩逻辑？答案是肯定的。接下来我们将梳理具体的实现思路。

压缩思路

在 JS 环境中进行图片压缩，核心思路是利用 Canvas 的绘图能力。通过调整图片的分辨率或控制绘图质量，从而达到减小图片体积的目的。具体实现步骤如下：

获取上传 Input 中的图片对象 File
将获取到的图片文件转换为 base64 格式字符串。
利用 Canvas 对 base64 编码的图片进行转换与压缩。此过程主要涉及 Canvas 的两个 API：drawImage 用于调节图片分辨率，toDataURL 用于调节压缩质量并输出结果，后续章节将对此进行详细介绍。
基于处理后的数据生成新的图片对象，并完成最终输出。

优缺点介绍

尽管 Canvas 压缩方式具有其独特优势，但也存在相应的局限性：

优点：实现逻辑简单，参数支持配置化，允许自定义图片尺寸以及指定区域裁剪等功能。
缺点：仅 jpeg 和 webp 格式支持在原图尺寸下通过调整质量参数来压缩图片；对于其他图片格式，只能通过调整图片尺寸来实现压缩效果。

代码实现


<template>
 <div class="container">
 <input type="file" id="input-img" @change="compress" />
 <a :download="fileName" :href="compressImg" rel="external nofollow" >普通下载</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 = this;
  let reader = new FileReader();
  // 读取文件
  reader.readAsDataURL(img);
  reader.onload = function(e) {
  let image = new Image(); //新建一个img标签
  image.src = e.target.result;
  image.onload = function() {
   let canvas = document.createElement('canvas');
   let context = canvas.getContext('2d');
   // 定义 canvas 大小，也就是压缩后下载的图片大小
   let imageWidth = image.width; //压缩后图片的大小
   let imageHeight = image.height;
   canvas.width = imageWidth;
   canvas.height = imageHeight;
   
   // 图片不压缩，全部加载展示
   context.drawImage(image, 0, 0);
   // 图片按压缩尺寸载入
   // let imageWidth = 500; //压缩后图片的大小
   // let imageHeight = 200;
   // context.drawImage(image, 0, 0, 500, 200);
   // 图片去截取指定位置载入
   // context.drawImage(image,100, 100, 100, 100, 0, 0, imageWidth, imageHeight);
   vm.compressImg = canvas.toDataURL(`image/${type}`);
  };
  };
 },
 // 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>

上述代码可直接运行查看效果。如果不使用 Vue 框架，只需对代码进行少量调整即可。下面将具体分解代码的实现逻辑。

Input 上传 File 处理

利用 FileReader 对象的 readAsDataURL 方法，将 File 对象转换为 URL 格式的字符串（即 base64 编码）。


const fileObj = document.querySelector('#input-img').files[0];
let reader = new FileReader();
// 读取文件
reader.readAsDataURL(fileObj);

Canvas 处理 File 对象

创建一个 Image 对象和一个 canvas 画布，设定目标图片尺寸，并调用 drawImage 方法在 Canvas 中绘制上传的图片。


let image = new Image(); //新建一个img标签
image.src = e.target.result;
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
context.drawImage(image, 0, 0);

Api 解析：drawImage

context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

img

指代图片对象，可以是页面中获取的 DOM 元素，也可以是虚拟 DOM 中的图片实例。

dx , dy , dWidth , dHeight

这些参数用于在 Canvas 画布上划定放置图片的区域。dx 和 dy 表示绘图位置在 Canvas 元素上的 X 轴和 Y 轴坐标；dWidth 和 dHeight 指在 Canvas 上绘制图像的宽度和高度（若未指定，绘制时图片宽高不会发生缩放）。

sx , sy , swidth , sheight

这四个参数用于裁剪源图片，定义图片在 Canvas 画布上显示的大小和位置。sx 和 sy 表示源图片上裁剪起始点的 X 轴和 Y 轴坐标；swidth 和 sheight 定义裁剪区域的宽高。最终显示在 Canvas 上的图片即为该裁剪区域的内容（若未指定 swidth 和 sheight，则默认从坐标 sx 和 sy 开始，至图片右下角结束的整个矩形区域）。

以下为图片绘制的实例：


context.drawImage(image, 0, 0, 100, 100);
context.drawImage(image, 300, 300, 200, 200);
context.drawImage(image, 0, 100, 150, 150, 300, 0, 150, 150);

需要注意的是，API 中 sx, sy, swidth, sheight 为可选参数，但其位置位于 dx, dy, dWidth, dHeight 之前。

Canvas 输出图片

调用 Canvas 的 toDataURL 方法，即可输出 base64 格式的图片数据。


canvas.toDataURL(`image/${type}`);

Api 解析：toDataURL


canvas.toDataURL(type, encoderOptions);

type 可选

指定图片格式，默认为 image/png。

encoderOptions 可选

当指定图片格式为 image/jpeg 或 image/webp 时，该参数用于指定 0 到 1 之间的图片质量值。若超出此范围，将使用默认值 0.92。其他参数将被忽略。

a 标签的下载

利用 <a> 标签的 download 属性，即可实现图片的下载功能。

Api 解析：download


// href 下载必填
<a download="filename" href="href" rel="external nofollow" > 下载 </a>

filename

可选参数，规定作为文件名使用的文本。

href

指定文件的下载地址。

非主流浏览器下载处理

上述方法可解决 Chrome、Firefox 和 Safari（经测试支持）等浏览器的下载功能。由于 IE 等浏览器不支持 download 属性，因此需要采用其他下载方式，即代码中的后续处理逻辑。


// 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();
 }
}

将之前 Canvas 生成的 base64 数据拆分后，通过 atob 方法进行解码。
将解码后的数据转换为 Uint8Array 格式的无符号整型数组。
利用转换后的数组生成一个 Blob 数据对象，并通过 URL.createObjectURL(blob) 创建一个临时的 DOM 对象。
随后，IE 类浏览器可调用 window.navigator.msSaveOrOpenBlob 方法执行下载，其他现代浏览器则继续通过 <a> 标签的 download 属性进行下载。

Api 解析：atob

base-64 解码使用 atob() 方法。


window.atob(encodedStr)

encodedStr

必需参数，是一个通过 btoa() 方法编码的字符串，其中 btoa() 是 base64 编码的方法。

Api 解析：Uint8Array


new Uint8Array(length)

length

创建一个初始化为 0、包含 length 个元素的无符号整型数组。

Api 解析： Blob

Blob 对象表示一个不可变、原始数据的类文件对象。


// 构造函数允许通过其它对象创建 Blob 对象
new Blob([obj],{type:createType})

obj

字符串内容。

createType

要构造的数据类型。

兼容性 IE 10 以上

Api 解析：createObjectURL

该静态方法会创建一个 DOMString。


objectURL = URL.createObjectURL(object);

object

用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。

Api 解析： window.navigator


// 官方已不建议使用的文件下载方式，仅针对 ie 且兼容性 10 以上
// msSaveBlob 仅提供下载
// msSaveOrOpenBlob 支持下载和打开
window.navigator.msSaveOrOpenBlob(blob, fileName);

blob

需要下载的 blob 对象。

fileName

下载后生成的文件名称。

总结

本文仅介绍了图片压缩的基本思路，其简单应用场景如下，当然这也会引申出更多使用场景，有待进一步挖掘。

若上传存储的图片对文件大小或格式有要求，可统一进行压缩处理。
若前台页面需要编辑图片，可在 Canvas 处理图片时增加其他逻辑，例如添加文字、剪裁、拼图等操作。

温馨提示：由于部分接口存在 IE 兼容性问题，IE 浏览器方面，仅能支持 IE10 以上版本进行下载。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JS 图片压缩原理与实现方法详解

前言