JS 图片简易压缩

时间  2020-04-30
标签 图片 简易 压缩 栏目 JavaScript 繁體版
原文   原文链接

这是第 48 篇不掺水的原创，想获取更多原创好文，请扫 👆上方二维码关注咱们吧~
本文首发于前端早早聊公众号：JS 图片简易压缩前端

季节.png

前言

提及图片压缩，你们想到的或者平时用到的不少工具均可以实现，例如，客户端类的有图片压缩工具 PPDuck3， JS 实现类的有插件 compression.js ，亦或是在线处理类的 OSS 上传，文件上传后，在访问文件时中也有图片的压缩配置选项，不过，能不能本身撸一套 JS 实现的图片压缩代码呢？固然能够，那咱们先来理一下思路。vue

压缩思路

涉及到 JS 的图片压缩，个人想法是须要用到 Canvas 的绘图能力，经过调整图片的分辨率或者绘图质量来达到图片压缩的效果，实现思路以下：web

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

优缺点介绍

不过 Canvas 压缩的方式也有着本身的优缺点：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 = 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 处理

将 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 中的图片对象。post

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 标签的下载

调用 <a> 标签的 download 属性，便可完成图片的下载。

Api 解析：download

// href 下载必填
<a download="filename" href="href"> 下载 </a>
复制代码

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 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 以上版本进行下载。

推荐阅读

多是最全的 “文本溢出截断省略” 方案合集

图文并茂，为你揭开“单点登陆“的神秘面纱

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 50 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在平常的业务对接以外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推进并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

若是你想改变一直被事折腾，但愿开始能折腾事；若是你想改变一直被告诫须要多些想法，却无从破局；若是你想改变你有能力去作成那个结果，却不须要你；若是你想改变你想作成的事须要一个团队去支撑，但没你带人的位置；若是你想改变既定的节奏，将会是“ 5 年工做时间 3 年工做经验”；若是你想改变原本悟性不错，但老是有那一层窗户纸的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但愿参与到随着业务腾飞的过程，亲手推进一个有着深刻的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我以为咱们该聊聊。任什么时候间，等着你写点什么，发给 ZooTeam@cai-inc.com

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程