JS图片压缩的实现思路

前言

十年的昌乐网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整昌乐建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“昌乐网站设计”,“昌乐网站推广”以来，每个客户项目都认真落实执行。

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

压缩思路

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

•  获取上传 Input 中的图片对象 File
•  将图片转换成 base64 格式
•  base64 编码的图片通过 Canvas 转换压缩，这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api，一个调节图片的分辨率的，一个是调节图片压缩质量并且输出的，后续会有详细介绍
•  转换后的图片生成对应的新图片，然后输出

优缺点介绍

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

•  优点：实现简单，参数可以配置化，自定义图片的尺寸，指定区域裁剪等等。
•  缺点：只有 jpeg 、webp 支持原图尺寸下图片质量的调整来达到压缩图片的效果，其他图片格式，仅能通过调节尺寸来实现

代码实现

上面的代码是可以直接拿来看效果的，不喜欢用 Vue 的也可以把代码稍微调整一下，下面开始具体分解一下代码的实现思路

Input 上传 File 处理

将 File 对象通过 FileReader 的 readAsDataURL 方法转换为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

这 4 个参数是用来裁剪源图片的，表示图片在 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 标签的下载

调用 标签的 download 属性，即可完成图片的下载。

Api 解析：download

 
 
 
 

  
  
  
  
// href 下载必填 
  
  
  
  
 下载 
 
 
 
 

filename

选填，规定作为文件名来使用的文本。

href

文件的下载地址。

非主流浏览器下载处理

到此可以解决 Chroma 、 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 rawrawLength = 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 方法来执行下载，其他浏览器也可以继续通过 标签的 download 属性来进行下载

 
 
 
 

  
  
  
  
window.atob(encodedStr)
 
 
 
 

 
 
 
 

  
  
  
  
new Uint8Array(length)
 
 
 
 

 
 
 
 

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

 
 
 
 

  
  
  
  
objectURL = URL.createObjectURL(object);
 
 
 
 

 
 
 
 

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

网站题目：JS图片压缩的实现思路
网址分享：http://www.csdahua.cn/qtweb/news6/273056.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网