文字：编码(encode)/解码(decode)

计算机里面只有二进制，那文字是如何保存的呢？还是保存为二进制，比如：

源栈欢迎你！

就有可能是：

100101010101010101010101010111110100101100001000101010

无论是写入（存储器）还是（从存储器）读取，只需要制定一定转换规则就行了。

比如：源 => 10010101，栈 => 01010101，……

规则可以分为两种：

• 定长：每个字符都占固定位的长度，否则你没办法在一串二进制中分隔出一个一个的字符，这样我们就只需要一个字符集（数字 <=> 字符）就OK了
• 变长：每个字符所占的长度是不一样的（为了省空间啊，^_^）。这就要复杂一些，映射除了需要字符集，还需要知道存储每个字符占用的二进制数据长度
  

主流编码规则

规则最好是统一，才便于信息流通（理解?）。

按这种方法，目前主流的编码规则包括：

• ASCII (American Standard Code for Information Interchange，读作['æski])：美国信息交换标准代码，1个字符需要8位二进制长度（所以Byte才被翻译成字节），分为两部分：
  0-127：英文大小写字母（64个）、阿拉伯数字（10个）、英文标点符号（若干）、非打印字符（换行、Tab……）和控制字符（Ctrl/Shift/Delete）
  128-255：其他西文（比如俄语/法语/德语）中的特殊字符，比如：ж / é / ß ……
• UTF-X（Unicode Transformation Format）：编码地球上几乎所有地区（比如汉语、日语、阿拉伯语……）的文字甚至一些特殊图形字符。因为现在存储空间便宜，所以unicode编码使用最广泛（默认）。其中，unicode是字符集，UTF-X是具体的编码规则（变长）。
  
• GBK（GuoBiao Kuozhan）：国标扩展，是我国专为汉字指定的一套编码

演示和ANSI

用notepad++演示：

• 字母a的ANSII码是97（十进制）
• 同样的内容，用不同的编码格式，就会产生乱码

注意：notepad++里没有ASCII也没有GB，只有ANSI（注意区别），而且ANSI下就能输入汉字，这是怎么回事？

ANSI(American National Standards Institute)['ænsi]是windows搞出来的，它实际上是根据操作系统的语言版本不同，选择使用不同的编码。比如简体中文版，ANSI就对应GBK；英文版，ANSI就对应ASCII；……

图像

图像存储呈现比文字要复杂一些，但本质上还是基于一套规则或一种编码。

计算机中，图像分为两种：

位图（bitmap）

把一张画布纵横切割成无数的小方块，给不同的小方块填充不同的颜色，就能组成一幅图案。

演示：放大/缩小这些图案

计算机只要记录下每一个小方块的颜色，就记录了这种图片。

一个小方块，就是一个像素（pixel）。

一张图片，切分得越细，像素就越多（高），就越细腻，越逼真。

屏幕最多能够呈现的像素，就被称之为分辨率。

演示：调整屏幕分辨率

颜色：RGBA

前提：所有颜色都可以通过红（Red）绿（Green）蓝（Blue）三种基本色合成。

每种颜色，可以被细分成256种亮度，计算机记录下合成某种颜色所需三种颜色的亮度，也就记住了这种颜色。

帮助理解：小学画水彩画调色板

演示：用三个16进制（复习）数字表示颜色，比如：

• 红色：#FF0000,
• 蓝色：#0000FF,
• 白色：#FFFFFF，
• 黑色：#000000，
• 某颜色：#849B64
  

另外，还可以再加一个透明度（Alpha）。

矢量图

计算机把图像拆分为点线面等不同的几何图形，然后存储这些图形的绘制方法。

演示：绘制一个“铜钱”：

1. 设置一个画布的大小和颜色，然后在这个画布上
   
2. 先画一个圆：圆心在某坐标点，半径为多少，用什么笔
3. 给圆填充颜色
   
4. 再画一个矩形：确定左上角和右下角坐标即可，填充颜色
5. 将矩形置于圆形上方
   

因为记录的是绘制过程/方法，不是绘制结果，矢量图就不会因为放大/缩小而变化。

如何选择？

有的时候，没得选。比如照片（复杂、无规律），只能是位图；矢量图通常是通过电脑绘图软件获得的。

位图很难转换成矢量图；但矢量图可以转化为位图。（演示）

压缩和原图

和文字相比，图片显然更占空间，所以将图片变得更小（压缩）就显得更加必要。

比如：微信上传照片，都有一个选项“查看原图”

图片可以被压缩（减少存储大小），压缩可以分为两种：

• 无损：压缩后的图片和未压缩的图片质量一样，换言之，压缩没有损害原图的画质
• 有损：“无损”反过来。@想一想@：为什么要有损压缩？

压缩的实现，最简单的方法：将颜色相同/近的一块图案坐标统一记录

演示：两种方式压缩图片大小

• 直接改图片尺寸
• 不更改图片像素大小
  

图片格式

注意：需要操作系统文件知识

目前来说，（Web开发）常用的几种图片格式有：

• jpg/jpge：位图，可有损压缩：数码照片最常用
• png：位图，无损压缩，可透明背景：windows上截图/自带的画图板生成
• gif：像素较低，可制作动图：比如QQ表情包
• ico：除了浏览器tab图标，其实用得不多，^_^
• svg：矢量图，最大特点：可XML（文本，非二进制）格式描述生成

  <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">  
      <circle fill="red" cx="50" cy="50" r="50" stroke="black"></circle>
  </svg>

模拟面试/自测题

1. 为什么一些（姓名中的）生僻字没办法录入电脑？
2. “手持两把锟斤拷，口中疾呼烫烫烫”是怎么个梗？
3. 调一下你电脑屏幕的分辨率，想一想为什么分辨率越低，文字越大？
4. 算一算：按RGB方式，理论上，计算机可以存储多少种颜色？
5. 找到讲义中四种格式的图片
   

源栈学历

在当前系列 认识计算机 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：