图片相关知识

一、图片是什么？

位图

位圖（英語：Bitmap，台湾稱為點陣圖），又称栅格图（Raster graphics），是使用像素阵列(Pixel-array/Dot-matrix點陣)来表示的图像。

位图也可指：

• 一种数据结构，代表了有限域中的稠集（dense set），每一个元素至少出现一次，没有其他的数据和元素相关联。在索引，数据压缩等方面有广泛应用。

像素，為影像顯示的基本單位，譯自英文「pixel」，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示「畫像元素」之意，有時亦被稱為pel（picture element）。每个这样的訊息元素不是一个点或者一个方块，而是一个抽象的取樣。仔细處理的话，一幅影像中的像素可以在任何尺度上看起来都不像分离的点或者方块；但是在很多情况下，它们采用点或者方块显示。每個像素可有各自的顏色值，可採三原色顯示，因而又分成紅色、綠色、藍色三種子像素（RGB色域），或者青色、洋紅色（紫色）、黄色和黑色（CMYK色域，印刷行业以及打印机中常见）。照片是一个个取樣点的集合，在影像没有经过不正确的/有损的压缩或相机镜头合适的前提下，單位面積内的像素越多代表解析度越高，所顯示的影像就會接近于真实物体。

一个像素所能表达的不同颜色数取决于比特每像素（BPP,bit per pixel）。这个最大数可以通过取2的色彩深度次幂来得到。例如，常见的取值有

• 8 bpp：256色，亦称为“8位元”；

• 16 bpp：216=65,536色，称为高彩色，亦称为“16位元”；

• 24 bpp：224=16,777,216色，称为真彩色，通常的记法为“1670万色”，亦称为“24位色”；

• 32 bpp：224 +28，電腦领域较常见的32位色并不是表示232种颜色，而是在24位色基础上增加了8位元（28=256级）的灰階，因此32位元的色彩总数和24位元是相同的，32位元也称为全彩。

• 48 bpp：248=281,474,976,710,656色，用于很多专业的掃描器。

256色或者更少的色彩的影像经常以块或平面格式存储于顯示記憶體中，其中顯示記憶體的每个像素是到一个称为调色板的颜色代碼的索引值。这些模式因而有时被称为_索引_模式。虽然每次只有256色，但是这256种可以选自一个通常是16兆色的调色板，所以可以有多種組合。改变调色板中的色彩值可以得到一种动画效果，Windows 95和Windows 98的标志可能是这类动画最著名的例子了。

对于超过8位元的深度，这些数位就是三个分量（红绿蓝）的各自的数位的总和。一个16位元的深度通常分为5位红色和5位元蓝色，6位元绿色（眼睛对于绿色更为敏感）。24位元的深度一般是每个分量8位元。在Windows系统中，32位深度也是可选的：这意味着24位的像素有8位额外的数位来描述透明度。在老一些的系统中，4bpp（16色）也是很常见的。

当可交換圖檔格式显示在螢幕上，每个像素的数位对于光栅文本和对螢幕可以是不同的。有些光栅圖形文件格式相对其他格式有更大的色彩深度。例如GIF格式，其最大深度为8位（256色），而TIFF文件可以处理48位元色深。没有任何螢幕可以显示48位元色彩，人眼只能分辨约1000种颜色，CRT可以显示到32位元，而LCD由于自身的局限性最多只能显示24位元，中低階的LCD只能显示16位元甚至12位元，但如前所述，超过1000种颜色后人眼无从分辨，因此12位元或者16位元对于人眼区别不大。所以48位这个深度通常用于特殊专业应用，例如掃描器和列印機。这种文件在螢幕上采用24位深度绘制。

https://ustc-dip.github.io/slice/Chapter6-%E5%BD%A9%E8%89%B2%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86.pdf

基于笛卡尔坐标系，三原色位于3个角上 在RGB空间中，表示每个像素的比特数称为像素深度。考虑一 幅RGB图像，其中每幅红绿蓝图像都是8比特图像，所以每个 RGB像素有24比特的深度

假定256种颜色是最小颜色数，已知256颜色中的40种可被各种 操作系统进行不同处理，剩下的216中颜色已成为稳定色 216种稳定色中的每种可由3个RGB值形成，但每个值只能是 0,51,102,153,204或255，这些RGB三元组提供种 因为要取3个数来形成RGB彩色，每种稳定色由上表中的3个两 位十六进制数形成。例如，最纯净的红色是FF0000。使用更为 熟悉的十进制表示可得到相同的结果，例如，以十进制表示的 最亮红色为R=255(FF)和G=B=0。

稳定色 右图显示了按RGB 的值降序排列的216 种稳定色 不是所有可能的8比 特灰色都包含在216 中稳定色中 RGB稳定色立方体 仅在表面上存在有 效的颜色，整个表 面被216种颜色覆盖

百萬畫素（Mega Pixels，缩写为MP）是指有「一百万个畫素」，通常用于表达數位相機的解析度。例如，一个相机可以使用2048×1536畫素的解析度，通常被称为有"3.1百萬畫素/310万畫素"（2048×1536=3,145,728，通常只计算前兩個位作有效數字）。

數位相机使用感光电子器件，或者是耦合电荷设备（CCDs）或者CMOS感測器，它们记录每个畫素的辉度级别。在多数數位相機中，CCD采用某种排列的藍色光濾波器，在Bayer滤波器合併中带有红，绿，蓝区域，使得感光畫素可以记录单个基色的辉度。相机对相邻畫素的色彩訊息进行插值，这个过程称为解鑲嵌（de-mosaic），然后建立最后的影像。这样，一个數位相機中的_x_兆畫素的影像最后的彩色解析度最后可能只有同样影像在扫描仪中的解析度的四分之一。这样，一幅蓝色或者红色的物体的影像倾向于比灰色的物体要模糊。绿色物体似乎不那么模糊，因为绿色被分配了更多的像素（因为眼睛对于绿色的敏感性）。参看[1] （页面存档备份，存于互联网档案馆） 的详细讨论。

作为一个新的发展，Foveon X3 CCD采用三层影像感應器在每个像素點感應红绿蓝强度。这个结构消除了解鑲嵌的需要因而消除了相关的影像失真，例如高对比度的边的色彩模糊这种失真。

RGB图像由三个颜色通道组成。8 位/通道的 RGB 图像中的每个通道有 256 个可能的值，这意味着该图像有 1600 万个以上可能的颜色值。有时将带有 8 位/通道 (bpc) 的 RGB 图像称作 24 位图像（8 位 x 3 通道 = 24 位数据/像素）。[1]通常将使用24位RGB组合数据位表示的的位图称为真彩色位图。

例如，一张 4px × 4px 的彩色图片，未压缩的的原始图像数据，就是一个 4 × 4 矩形网格，每一个网格代表一个像素。

而彩色图片的每一个像素，又是由 红，绿，蓝 三基色构成，如下图右边所示，红绿蓝，对应于 r g b 三个数值，也就是我常说的 RGB 色彩模式。

RGB，我们在计算机视觉领域，又称为颜色通道，彩色图像有三个通道值，每个颜色通道，都是一个 0～255 的整数值，占用一个字节（Byte）的存储空间。1 个像素点需要 3 个字节

因此，我们很容易计算上面这张 4×4 彩色图片占用的存储空间为 4 × 4 × 3 = 48 字节 (Bytes) 。换算成我们熟悉的 KB，就是 48 / 1024 = 0.046875 KB，不到 0.1 KB。

事实上，我们很少见到这么小的图片，甚至在我们的个人电脑和手机上，根本无法正常看到这么小的图片。这里为了方便理解和计算，做了技术上的处理，而不是真实看到的图片大小。

拓展：按照在电脑上常用的分辨率 72 (像素/英寸)，即 每 2.54 厘米 容纳 72 个像素，或者说，一个像素占用的屏幕尺寸是 0.35 毫米，那么上面 4 × 4 图片，在屏幕上 1:1 显示，占用屏幕的物理尺寸只有 1.4 × 1.4 毫米。显然，用肉眼是无法看清的。

在理解一张 4 × 4 的彩色图片占用存储空间大小，我们同样的方式计算如下，320 × 320 的彩色图片，这个大小在我们日常生活，也不算一张大图，相当于我们用作微信头像的大小。

我相信我们可以很快得出结果，320 × 320 × 3 = 300 KB ，相当于上面 4 × 4 图片的 6000 多倍。

二、为什么图像是波？

我们知道，图像由像素组成。下图是一张 400 x 400 的图片，一共包含了 16 万个像素点。

每个像素的颜色，可以用红、绿、蓝、透明度四个值描述，大小范围都是0 ～ 255，比如黑色是[0, 0, 0, 255]，白色是[255, 255, 255, 255]。通过Canvas API 就可以拿到这些值。

如果把每一行所有像素（上例是400个）的红、绿、蓝的值，依次画成三条曲线，就得到了下面的图形。

可以看到，每条曲线都在不停的上下波动。有些区域的波动比较小，有些区域突然出现了大幅波动（比如 54 和 324 这两点）。

对比一下图像就能发现，曲线波动较大的地方，也是图像出现突变的地方。

这说明波动与图像是紧密关联的。图像本质上就是各种色彩波的叠加。

三、频率

综上所述，图像就是色彩的波动：波动大，就是色彩急剧变化；波动小，就是色彩平滑过渡。因此，波的各种指标可以用来描述图像。

频率（frequency）是波动快慢的指标，单位时间内波动次数越多，频率越高，反之越低。

上图是函数sin(Θ)的图形，在2π的周期内完成了一次波动，频率就是1。

上图是函数sin(2Θ)的图形，在2π的周期内完成了两次波动，频率就是2。

所以，色彩剧烈变化的地方，就是图像的高频区域；色彩稳定平滑的地方，就是低频区域。

四、滤波器

物理学对波的研究已经非常深入，提出了很多处理波的方法，其中就有滤波器（filter）：过滤掉某些波，保留另一些波。

下面是两种常见的滤波器 。

• 低通滤波器（lowpass）：减弱或阻隔高频信号，保留低频信号

• 高通滤波器（highpass）：减弱或阻隔低频信号，保留高频信号

下面是低通滤波的例子。

上图中，蓝线是原始的波形，绿线是低通滤波lowpass后的波形。可以看到，绿线的波动比蓝线小很多，非常平滑。

下面是高通滤波的例子。

上图中，黄线是原始的波形，蓝线是高通滤波highpass后的波形。可以看到，黄线的三个波峰和两个波谷（低频波动），在蓝线上都消失了，而黄线上那些密集的小幅波动（高频波动），则是全部被蓝线保留。

再看一个例子。

上图有三根曲线，黄线是高频波动，红线是低频波动。它们可以合成为一根曲线，就是绿线。

上图中，绿线进行低通滤波和高通滤波后，得到两根黑色的曲线，它们的波形跟原始的黄线和红线是完全一致的。

五、图像的滤波

浏览器实际上包含了滤波器的实现，因为 Web Audio API里面定义了声波的滤波。这意味着可以通过浏览器，将lowpass和highpass运用于图像。

lowpass使得图像的高频区域变成低频，即色彩变化剧烈的区域变得平滑，也就是出现模糊效果。

上图中，红线是原始的色彩曲线，蓝线是低通滤波后的曲线。

highpass正好相反，过滤了低频，只保留那些变化最快速最剧烈的区域，也就是图像里面的物体边缘，所以常用于边缘识别。

上图中，红线是原始的色彩曲线，蓝线是高通滤波后的曲线。

下面这个网址，可以将滤波器拖到图像上，产生过滤后的效果。

浏览器实现滤波的范例代码，可以看这个仓库。

图片的二进制形式

不同于普通文本文件，图片在计算机里存储形式，是二进制文件。

我们可以借助一个命令行工具 hexdump 来查看图片的二进制形式：

输出结果如下图所示：

图中，红线框圈住的部分，是图片数据的字节流编址，可以看作是为了查看方便，添加的行号，红框右边的才是图片的真实存储字节流，并且每行显示 16 个字节。当然不管是“行号”还是图片数据，为了显示的简介性，默认都是用了十六进制。

• RGB 表示形式： RGB(256,256,256)

• 十六进制表示形式： #ffffff

魔数

文件类型	文件头	文件尾
JPG	FF D8 FF E0	FFD9
GIF	47 49 46 38
PSD	38 42 50 53
PNG	89 50 4E 47	AE 42 60 82
GIF	47 49 46 38	00 3B
BMP	42 4D
TIFF	49 49 2A 00
ZIP	50 4B 03 04	50 4B
MS Word/Excel (xls.or.doc)	D0 CF 11 E0
PDF	25 50 44 46 2D 31 2E
RAR	52 61 72 21

二、不同图片格式

JPG/JPEG

JPG是如今最常用的图片格式之一，其优点为兼容性高、传输速度快、内存小。JPG是一种有损压缩方案，可在保持较高图片质量的前提下，被压缩到原图内存的二十分之一大小。

当然，如果是出于对图片高质量的要求，JPG格式的图片依然存在失真的情况，故而无法与PNG或TIF格式相比较。

值得一提的是，在图片编辑中，对于JPG格式的图片，每一次输出都会损失像素质量，因此当我们在用图片编辑软件，编辑JPG格式的图片时，尽量不要过于频繁地保存步骤，防止像素损失。

PNG

PNG是一种较为新型的图片格式，符合WWW标准。PNG结合了JPG和GIF的优点，对于图片本身质量的减损非常低。因其能够支持压缩不失真、透明背景、渐变图像的制作要求，PNG格式也是各大制图软件例如PS、InDesign输出或编辑的原始格式。

所以，当你开始初学Adobe的制图软件时，如果要对一个图片进行多次修改，建议将其导入导出为PNG格式，方便你随时修改，不用担心损失像素或无法修改步骤的发生。

GIF想必也是大家一个最熟悉的图片格式。如今“GIF”已经变成人们心目中约定俗成的动图格式，事实上，GIF格式的图片是分为静态和动态两种的。静态的GIF格式图片和JPG格式的图片无异，而动态的GIF图片则是由多幅图片保存为一个图片，形成动画效果而制成的。

值得一提的是，因为只支持256色的原因，GIF格式的图片很少适用于静态图像处理工作。因此你就会发现，如果你用PS或者Keynote导入GIF格式的图片，无论静态动态，其图片质量大都差强人意。

GIF图象是基于颜色列表的（存储的数据是该点的颜色对应于颜色列表的索引值），最多只支持8位（256色）。GIF文件内部分成许多存储块，用来存储多幅图象或者是决定图象表现行为的控制块，用以实现动画和交互式应用。GIF文件还通过LZW压缩算法压缩图象数据来减少图象尺寸

图像互换格式（英語：Graphics Interchange Format，簡稱GIF）是一种位图图形文件格式，以8位色（即256种颜色）重现真彩色的图像。它实际上是一种压缩文档，采用LZW压缩算法进行编码，有效地减少了图像文件在网络上传输的时间。它是目前全球資訊網广泛应用的网络传输图像格式之一。史蒂芬·威爾海特（Stephen Wilhite）在Compuserve公司工作時，率領工程團隊發明GIF檔，憑著體積小、成像相對清晰的優點，十分適合早期網際網路頻寬小的環境，而今網路使用者將GIF檔用於創作，變成用來作為網路迷因的格式之一，威爾海特也在2013年獲得威比獎（The Webby Award）終身成就獎。至於「GIF」怎麼唸，許多人都唸成「gift」（[ɡɪf]）的音，但他本人正名應該唸「Jif」（[d͡ʒɪf]）一樣的音。

特性

• 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。

• 可插入多帧，从而实现动画效果。

• 可设置透明色以产生对象浮现于背景之上的效果。

• 由于采用了8位压缩，最多只能处理256种颜色，故不宜应用于真彩色图片。

技术简介

GIF主要是为数据流而设计的一种传输格式，而不是作为文件的存储格式。它具有顺序组织形式而不是随机组织形式。

GIF有五个主要部分以固定顺序出现，所有部分均由一个或多个區块（block）组成。每个块由第一个字节中的标识码或特征码标识。这些部分的顺序为：头块、逻辑屏幕描述块、可选的“全局”色彩表块（调色板）、各图像数据块（或专用的块）以及尾块（结束码）。下面是这些部分的内容：

• 起头為一个區块，它识别数据流为GIF，并指示如何解释后面的数据所需的最早版本的GIF解码程序（87a或89a）。

• 逻辑程序描述块定义了：所有后面图像的图像平面的大小、纵横尺寸比以及色彩深度（它类似于产生图像的监视器屏幕）。它还指明后面跟随的是否为“全局”色彩表。

• 全局色彩表（如果存在）构成一个24位RGB元组的调色板（每种底色为一个字节）。如果后面的像没有其自己的“局部”调色板，那么全局色表就是缺省调色板。

• 后续数据作为“图形”或“专用”块出现。图形块典型地包含一个或多个位图图像，也可能是覆盖的文本。专用块或者包含一个专用应用程序码，或者包含一句不可打印的注释。

• 最后的尾块指示值为3B（十六进制）的一个字节，表示数据流已结束。

注意：文件中的GIF数据流可能根本就不包含任何位图数据，这时，它只是要传输全局色彩表，作为没有自己调色板的后续数据流的缺省调色板。

如果你常玩电脑里的画图工具，你一定不会对BMP格式的图片陌生。BMP格式是Windows电脑系统的标准图片格式，同样也可适用于OS/2系统。BMP格式的图片文件内存较大，未经过压缩，保存了每个像素的信息，因此也是不少手绘达人钟爱的格式。

TIFF/TIF

TIF格式是一种跨平台的图片格式，可同时支持Windows和Mac系统的操作。TIF格式可以在保证图片不失真的情况下压缩，且保留图片的分层或是透明信息。

另外，由于TIF格式图片支持高位彩色图像印刷，也被广泛使用于扫描传真、文字处理、光学符号识别等应用当中。

WMF格式原本为Windows系统里一个常用的图元文件格式，和JPG和TIF一样，WMF格式也有两个扩展名分别为“.wmf”和“.emf”。

由于其图文合一的特殊性，WMF格式的图片大多比较粗糙，却也因为其图文合一的特殊性，WMF格式广泛用于Word内部储存图片，无论放大还是缩小，其图片质量都不会有变化。

PSD/EPS

这两种格式都是软件专属格式。

首先是PSD。PSD格式是Adobe制图软件PhotoShop的专属图片格式，可以在占用内存较小的情况下，保存图片中所有的图层、注解、通道、颜色模式等信息。也因其专属性，大部分其他的排版或制图软件是无法识别PSD格式图片的。

EPS格式专属于Adobe的Illustrator矢量制图软件。如同Illustrator是PhotoShop的进阶版一样，EPS也可以说是PSD格式的进阶版：除了能保存图片所有制作路径之外，EPS格式的图片还能保存文本文件信息，也因此被称为“带有预视功能的PS格式”。

三、 图片压缩的原理

尺寸压缩

10 × 10 的像素点区域块被用最中间那一个像素点代替

编码压缩

1. 有损压缩

有损压缩是利用了人类对图像或声波中的某些频率成分不敏感的特性，允许压缩过程中损失一定的信息；虽然不能完全恢复原始数据，但是所损失的部分对理解原始图像的影响缩小，却换来了大得多的压缩比

本质和尺寸压缩本质上一样，用最中间的一个像素点代替周围的像素点

2. 行程长度编码法（无损压缩）

常用的无损压缩算法，将一扫描行中颜色值相同的相邻像素用两个字节来表示， 第一个字节是一个计数值， 用于指定像素重复的次数； 第二个字节是具体像素的值。能够比较好地保存图像的质量，但是相对有损压缩来说这种方法的压缩率比较低

例如：499 500 500 500 501 → 499 500×3 501

3. 熵编码法（无损压缩）

熵编码法是一种进行无损数据压缩的技术，在这个技术中一段文字中的每个字母被一段不同长度的比特(Bit)所代替。与此相对的是LZ77或者LZ78等数据压缩方法，在这些方法中原文的一段字母列被其它字母取代。

本质上看就是利用一个算法，把一段字母用一个或单个字母代替（端到端之间可以存一个压缩字符映射表）

例如：499 500 500 500 501 → -1 0 500 0 1

使用 Canvas 压缩图片

以下内容转载自 JS 图片压缩

压缩思路

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

• 获取上传 Input 中的图片对象 File

• 将图片转换成 base64 格式

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

• 转换后的图片生成对应的新图片，然后输出

base64 编码指的是把二进制变成字符的过程，base64 解码就是把字符变回二进制的过程示例：

• 转换前 10101101,10111010,01110110

• 按照 编码规则 转换后 00101011, 00011011 ,00101001 ,00110110

• 十进制 43 27 41 54

• 对应 码表 中的值 r b p 2

• 所以上面的24位编码，编码后的Base64值为 rbp2

优缺点介绍

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

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

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

代码实现

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

1. Input 上传 File 处理

将 File 对象通过 FileReader 的 readAsDataURL 方法转换为URL格式的字符串（base64 编码）

2. Canvas 处理 File 对象

建立一个 Image 对象，一个 canvas 画布，设定自己想要下载的图片尺寸，调用 drawImage 方法在 canvas 中绘制上传的图片

【drawImage API 解析】

• img

就是图片对象，可以是页面上获取的 DOM 对象，也可以是虚拟 DOM 中的图片对象。

• dx、dy、dWidth、dHeight

参数必填，用于规定在 Canvas 中绘制图片的大小和起点位置

• sx、sy、swidth、sheight

参数选填，用于裁剪

以下为图片绘制的实例：

Api 中奇怪之处在于，sx、sy、swidth、sheight 为选填参数，但位置在 dx、dy、dWidth、dHeight 之前。

3. Canvas 输出图片

调用 canvas 的 toDataURL 方法可以输出 base64 格式的图片。

【toDataURL API 解析】

• type (可选)

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

• encoderOptions (可选)

在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

4. a 标签的下载

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

【download API 解析】filename (选填)：规定作为文件名来使用的文本。href：文件的下载地址