作者： semlinker
转发链接：https://mp.weixin.qq.com/s/i3ynTtPJOECoAYfqHFoo3Q
目录推荐10个常用的图片处理小帮手（上）「值得收藏」 本篇
前言本文给小伙伴们隆重介绍用于图片处理的十个 「“小帮手”」，他们各个身怀绝技，拥有模糊、压缩、裁剪、旋转、合成、比对等技能。相信认识他们之后，你将能够轻松应对大多数的图片处理场景。
该章节你将会学到以下知识：
- 如何区分图片的类型（可文件后缀名）；
- 如何获取图片的尺寸（可右键查看图片信息）；
- 如何预览本地图片（非图片阅读器）；
- 如何实现图片压缩（非图片压缩工具）；
- 如何操作位图像素数据（非 PS 等图片处理软件）；
- 如何实现图片隐写（非肉眼可见）。
十个图片处理 「“小帮手”」 已经已经迫不及待想与你见面，还在犹豫什么？赶紧出发吧！
一、基础知识1.1 位图「位图图像（bitmap），亦称为点阵图像或栅格图像，是由称作像素（图片元素）的单个点组成的。」 这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。
「用数码相机拍摄的照片、扫描仪扫描的图片以及计算机截屏图等都属于位图。」 位图的特点是可以表现色彩的变化和颜色的细微过渡，产生逼真的效果，缺点是在保存时需要记录每一个像素的位置和颜色值，占用较大的存储空间。常用的位图处理软件有 Photoshop、Painter 和 Windows 系统自带的画图工具等。
分辨率是位图不可逾越的壁垒，在对位图进行缩放、旋转等操作时，无法生产新的像素，因此会放大原有的像素填补空白，这样会让图片显得不清晰。
（图片来源：https://zh.wikipedia.org/wiki/位图）
图中的小方块被称为像素，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。
可以将像素视为整个图像中不可分割的单位或者是元素。「不可分割的意思是它不能够再切割成更小单位抑或是元素，它是以一个单一颜色的小格存在。」 每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上所呈现的大小。
1.2 矢量图所谓矢量图，就是使用直线和曲线来描述的图形，构成这些图形的元素是一些点、线、矩形、多边形、圆和弧线等，「它们都是通过数学公式计算获得的，具有编辑后不失真的特点。」例如一幅画的矢量图形实际上是由线段形成外框轮廓，由外框的颜色以及外框所封闭的颜色决定画显示出的颜色。
「矢量图以几何图形居多，图形可以无限放大，不变色、不模糊。」 常用于图案、标志、VI、文字等设计。常用软件有：CorelDraw、Illustrator、Freehand、XARA、CAD 等。
这里我们以 Web 开发者比较熟悉的 SVG（「Scalable Vector Graphics —— 可缩放矢量图形」）为例，来了解一下 SVG 的结构：
可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG 由 W3C 制定，是一个开放标准。
SVG 主要支持以下几种显示对象：
- 矢量显示对象，基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等；
- 嵌入式外部图像，包括 PNG、JPEG、SVG 等；
- 文字对象。
了解完位图与矢量图的区别，下面我们来介绍一下位图的数学表示。
1.3 位图的数学表示位图的像素都分配有特定的位置和颜色值。每个像素的颜色信息由 RGB 组合或者灰度值表示。
根据位深度，可将位图分为1、4、8、16、24 及 32 位图像等。每个像素使用的信息位数越多，可用的颜色就越多，颜色表现就越逼真，相应的数据量越大。
「1.3.1 二值图像」
位深度为 1 的像素位图只有两个可能的值（黑色和白色），所以又称为二值图像。二值图像的像素点只有黑白两种情况，因此每个像素点可以由 0 和 1 来表示。
比如一张 4 * 4 二值图像：
1101
1101
1000
1010
「1.3.2 RGB 图像」
RGB 图像由三个颜色通道组成，其中 RGB 代表红、绿、蓝三个通道的颜色。8 位/通道的 RGB 图像中的每个通道有 256 个可能的值，这意味着该图像有 1600 万个以上可能的颜色值。
有时将带有 8 位/通道（bpc）的 RGB 图像称作 24 位图像（8 位 x 3 通道 = 24 位数据/像素）。通常将使用 24 位 RGB 组合数据位表示的的位图称为真彩色位图。
RGB 彩色图像可由三种矩阵表示：一种代表像素中红色的强度，一种代表绿色，另一种代表蓝色。
