文字和图像:编码 / 格式 / 压缩

更多
2021年03月11日 09点25分 作者:叶飞 修改

文字:编码/解码

计算机里面只有二进制,那文字是如何保存的呢?还是保存为二进制,比如:

源栈欢迎你!

就有可能是:

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;……


图像

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

计算机中,图像分为两种:


位图

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

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

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

一个小方块,就是一个像素

一张图片,切分得越细,像素就越多(高),就越细腻,越逼真。

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

演示:调整屏幕分辨率


颜色: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. 找到讲义中四种格式的图片
文字 图像 编码 颜色 位图 矢量
赞: 0 踩: 1

打赏
已收到打赏的 帮帮币

你的 打赏 非常重要!
为了保证文章的质量,每一篇文章的发布,都已经消耗了作者 1 枚 帮帮币
没有“帮帮币”,作者无法发布新的文章。

全系列阅读
评论 / 0

编程基础


项目管理相关

需求发布、开发规划、部署、测试,源代码版本管理(git)等……

逸闻史话

认识计算机

编程语言

数据结构和算法

Web开发基础

全部
关键字



帮助

反馈