静态图像介绍

Posted kingreatwill

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了静态图像介绍相关的知识，希望对你有一定的参考价值。

静态图像类型

矢量（Vector）图

用数学公式描述的图像，用一系列绘图指令表示图像：图像中每个形状都用一个完整的公式描述，称为一个对象。

  • 优点：

    • 文件数据量很小：
    • 图像质量与分辨率无关：无论图像放大或缩小多少倍，总是以显示设备允许的最大清晰度显示。
      计算机计算与显示图像时，往往能看到画图的过程。

  • 缺点：

    • 不易制作色调丰富或色彩变化太多的图像；
    • 绘出来的图像不是很逼真；
    • 不易在不同的软件间交换文件。

位图（Bitmap）

通过像素点表示图像，每个像素具有颜色属性和位置属性。

  • 优点：
    • 显示速度快；
    • 真实世界的图像可以通过扫描仪、数码相机、摄像机等设备方便的转化为点位图。
  • 缺点：
    • 存储和传输时数据量比较大；
    • 缩放、旋转时算法复杂且容易失真。
  1. 线画稿（LineArt）
    只有黑白两种颜色。适合于由黑白两色构成而没有灰度阴影的图像
  2. 灰度图像（GrayScale）
    从技术上说，就是具有从黑到白的若干种灰度的单色图像。若灰度图像像素的灰度级用8bit表示，则每个像素都是介于黑色和白色之间的256（2*=256）种灰度中的一种。通常所说的黑白照片，其实包含了黑白之间的所有灰度色调。

灰度图像是除了黑白之外，还添加了第三种颜色：灰色，灰色把灰度划分为 256 个不同的亮度，例如纯白色，它的亮度级别是255。

图像转化为灰度图像有以下几种算法：

浮点算法：Gray = R * 0.3 + G * 0.59 + B * 0.11
整数方法：Gray = ( R * 30 + G * 59 + B * 11 ) / 100
移位方法：Gray = ( R * 76 + G * 151 + B * 28 ) >> 8
平均值法：Gray = ( R + G + B ) / 3
仅取绿色：Gray = G
加权平均值算法：R = G = B = R * 0.299 + G * 0.587 + B * 0.144

  1. 二值图像 (Binary Image)
    二值图像是取值只有0和1的逻辑数组

  2. 索引颜色图像（Index Color）
    索引颜色通常也称为映射颜色。在这种模式下，颜色是一组预先定义的、有限的颜色。索引颜色的图像最多只能显示256种颜色。索引颜色图像在图像文件里定义索引颜色。打开该文件时，构成该图像具体颜色的索引值就被读入程序里，然后根据索引值找到最终的颜色。

  3. 伪彩色图像(Pseudo-color)
    我们知道可以观察出颜色的光的波长范围是有限的，仅仅有那么一小段，换句话说也就是说有一大段光，仅仅有一小段有颜色。
    其它都是灰度的，但人类视觉有一个特点就是，仅仅能分辨出二十几种灰度，也就是说採集到的灰度图像分辨率超级高。有一千个灰度级，但非常遗憾。
    人们仅仅能看出二十几个，也就是说信息损失了五十倍，但人类视觉对彩色的分辨能力相当强，可以分辨出几千种色度。
    在从採集的角度说下伪彩和真彩色，伪彩色原始图像是灰度图像

  4. 真彩色图像（True Color） 对应的还有
    自然界中几乎所有颜色都可以由红、绿、蓝（R，G，B）组合而成。真彩色图像中，每一个像素由红、绿和蓝三个字节组成，每个字节为8bit，表示0到255之间的不同的亮度值。256×256×256，能表示约1670万种颜色。颜色深度为每像素24位的数字图像是目前所能获取、浏览和保存的颜色信息最丰富的彩色图像，由于它所表达的颜色远远超出了人眼所能辨别的范围，故将其称为“真彩色”。

  • 常用颜色的RGB值
    白色：rgb(255,255,255)
    黑色：rgb(0,0,0)
    红色：rgb(255,0,0)
    绿色：rgb(0,255,0)
    蓝色：rgb(0,0,255)
    青色：rgb(0,255,255)
    紫色：rgb(255,0,255)
    调整相关数字，便可以得到深浅不一的各种颜色。
    ARGB：
    A = Alpha表示透明度
    FF - 不透明
    00 - 全透明

颜色样式

RGB数值

颜色代码

颜色样式

RGB数值

颜色代码

黑色

0,0,0

#000000

白色

255,255,255

#FFFFFF

象牙黑

88,87,86

#666666

天蓝灰

202,235,216

#F0FFFF

冷灰

128,138,135

#808A87

灰色

192,192,192

#CCCCCC

暖灰

128,118,105

#808069

象牙灰

251,255,242

#FAFFF0

石板灰

118,128,105

#E6E6E6

亚麻灰

250,240,230

#FAF0E6

白烟灰

245,245,245

#F5F5F5

杏仁灰

255,235,205

#FFFFCD

蛋壳灰

252,230,202

#FCE6C9

贝壳灰

255,245,238

#FFF5EE

红色

255,0,0

#FF0000

黄色

255,255,0

#FFFF00

镉红

227,23,13

#E3170D

镉黄

255,153,18

#FF9912

砖红

156,102,31

#9C661F

香蕉黄

227,207,87

#E3CF57

珊瑚红

255,127,80

#FF7F50

金黄

255,215,0

#FFD700

番茄红

255,99,71

#FF6347

肉黄

255,125,64

#FF7D40

粉红

255,192,203

#FFC0CB

粉黄

255,227,132

#FFE384

印度红

176,23,31

#B0171F

橘黄

255,128,0

#FF8000

深红

255,0,255

#FF00FF

萝卜黄

237,145,33

#ED9121

黑红

116,0,0

#990033

黑黄

85,102,0

#8B864E

绿色

0,255,0

#00FF00

棕色

128,42,42

#802A2A

青色

0,255,255

#00FFFF

土色

199,97,20

#C76114

黄绿色

127,255,0

#7FFF00

沙棕色

244,164,95

#F4A460

青绿色

64,224,205

#40E0D0

棕褐色

210,180,140

#D2B48C

靛青色

8,46,84

#082E54

玫瑰红

188,143,143

#BC8F8F

森林绿

34,139,34

#228B22

赫色

160,82,45

#A0522D

草绿色

107,142,35

#6B8E23

肖贡土色

199,97,20

#C76114

蓝色

0,0,255

#0000FF

肖贡土色

160,32,240

#A020F0

锰蓝

3,168,158

#03A89E

淡紫色

218,112,214

#DA70D6

深蓝

25,25,112

#191970

紫罗兰

138,43,226

#8A2BE2

土耳其蓝

0,199,140

#00C78C

胡紫色

153,51,250

#9933FA

RGB按1：1：1取值的时候是一个灰度图像

图像文件格式

图像文件的格式，即图像文件的数据构成。一般每种图像文件均有一个文件头，在文件头之后是图像数据。

  • 文件头：
    一般包括文件类型、文件制作者、制作时间、版本号、文件大小等内容。
    内容由制作该图像文件的公司决定。
  • 图像数据：
    各种图像文件的制作还涉及到图像文件的压缩方式和存储效率等。
    数字图像有多种存储格式，每种格式一般由不同的开发商支持。随着信息技术的发展和图像应用领域的不断拓宽，还会出现新的图像格式。
  • 图像文件格式体系
    • 互联网用：GIF、JPG、PNG
    • 印刷用：TIF、JPG、TAG、PCX
    • 国际标准：TIF、JPG
    • bmp(bitmap)文件:Windows 位图可以用任何颜色深度（从黑白到 24 位颜色）存储单个光栅图像。Windows 位图文件格式与其他 Microsoft Windows 程序兼容。它不支持文件压缩，也不适用于 Web 页。优点：BMP 支持 1 位到 24 位颜色深度。

色彩深度（Color Depth，简称色深）/位分辨率（Bit Resolution）

色彩深度（Color Depth，简称色深），是用 位（bit）数来表示数码影像色彩数目的单位。
色彩深度越高，可用的颜色就越多，颜色之间的过渡更自然和平滑。
像素深度越深，所占用的存储空间越大。
相反，如果像素深度太浅，那也影响图像的质量，图像看起来让人觉得很粗糙和很不自然。

指每个像素所用的位数（bit），像素位决定了彩色图像的每个像素可能的颜色数，或者确定灰度图像每个像素可能有的灰度级数。例如，一个彩色图像的每个像素用R,G，B,三个分量来表示，如每个分量用8位，那么一个像素用24位表示，就说这个像素的深度是24

位深度计算是以2为底数的指数的幂。常见的有：

  • 1位：2种颜色，单色光，黑白二色，用于compact Macintoshes。
  • 2位：4种颜色，CGA，用于gray-scale早期的NeXTstation及color Macintoshes。
  • 3位：8种颜色，用于大部分早期的电脑显示器。
  • 4位：16种颜色，用于EGA及不常见及在更高的分辨率的VGA标准，color Macintoshes。
  • 5位：32种颜色，用于Original Amiga chipset。
  • 6位：64种颜色，用于Original Amiga chipset。
  • 7位：128种颜色
  • 8位：256种颜色，用于最早期的彩色Unix工作站，低分辨率的VGA，Super VGA，AGA，color Macintoshes。
    灰阶，有256种灰色（包括黑白）。若以24位模式来表示，则RGB的数值均一样，例如(200,200,200)。
    彩色图像，若以24位模式来表示，则RGB的数值均一样，例如(200,200,200)。就是常说的24位真彩，约为1670万色。
  • 9位：512种颜色
  • 10位:1024种颜色，
  • 12位：用于部分硅谷图形系统，Neo Geo，彩色NeXTstation及Amiga系统于HAM mode。
  • 16位：用于部分color Macintoshes( 红色占5 个位、蓝色占 5 个位、绿色占 6 个位，所以红色、蓝色、绿色各有 32、32、64 种明暗度的变化总共可以组合出 64K 种颜色 )。
  • 24位：有16,777,216色，真彩色，能提供比肉眼能识别更多的颜色，用于拍摄照片。
  • 32位：基于24位而生，增加8个位的Alpha通道。

python代码

# 图像处理第一课
"""
图像属性：
分辨率：400*400
宽度：400px
高度：400px
水平分辨率： 96 dpi
垂直分辨率： 96 dpi
位深度：24
分辨率单位：2

dpi：图像每英寸长度内的像素点数。DPI（Dots Per Inch，每英寸点数）
如果你的显示设备dpi值高，那么你显示的图片就小，如果你的dpi值非常低，那么显示的图片实际尺寸就非常大。
但是不管怎么样设置，并不影响你的文件的实际大小，不影响图片的实际大小。
"""


def pil_demo01():
    # https://pillow.readthedocs.io/en/stable/
    from PIL import Image
    import matplotlib.pyplot as plt

    img = Image.open("./img/lena.jpg")
    print(img.format, img.size, img.mode)
    # img需要转换像素点数组
    import numpy as np
    img_array = np.array(img)

    print(img_array[100, 100])  # RGB
    r = img_array[100, 100, 0]
    g = img_array[100, 100, 1]
    b = img_array[100, 100, 2]
    print(r)
    print(g)
    print(b)

    print(img_array.shape)  # (400,400,3) 3代表三维数组 r,g,b

    plt.figure()  # 图形
    plt.subplot(2, 2, 1)  # 将画板分为2行两列，本幅图位于第一个位置
    plt.imshow(img)
    # 转成灰度图
    # img.convert(‘L‘).save("./img/lena1.jpg",dpi=(300.0,300.0), quality = 95)
    plt.subplot(2, 2, 2)  # 将画板分为2行两列，本幅图位于第二个位置
    plt.imshow(img.convert(‘L‘))
    # 二值化
    # img.convert(‘1‘).save("./img/lena2.jpg")
    plt.subplot(2, 2, 3)  # 将画板分为2行两列，本幅图位于第3个位置
    plt.imshow(img.convert(‘1‘))
    plt.show()


def cv2_demo01():
    # opencv默认是BGR 而PIL是RGB
    # https://docs.opencv.org/master/d3/df2/tutorial_py_basic_ops.html
    import cv2
    import matplotlib.pyplot as plt
    # img 为图像像素点数组(<class ‘numpy.ndarray‘>)
    img = cv2.imread(‘./img/lena.jpg‘)
    # img = cv.imread(文件名,[,参数])
    # 第二个参数是一个标志，它指定了读取图像的方式。
    # cv.IMREAD_COLOR： 加载彩色图像，任何图像的透明度都会被忽视，如果不传参数，这个值是默认值。
    # cv.IMREAD_GRAYSCALE：以灰度模式加载图像。
    # cv.IMREAD_UNCHANGED：加载图像，包括alpha通道
    # 这三个标志可以简化为 1 、 0 、 -1
    print(type(img)) # <class ‘numpy.ndarray‘>
    print(img.size)  # 总像素数
    print(img[100, 100])  # BGR
    b = img[100, 100, 0]
    g = img[100, 100, 1]
    r = img[100, 100, 2]
    r2 = img.item(100, 100, 2)
    print(b)
    print(g)
    print(r, r2)
    print(img.shape)
    # 也可以直接修改 值img[100,100] = [255,255,255]
    # or 只改变red的值 img.itemset((100,100,2),100)
    # 也可以取某一块 到另一块上去
    eye = img[180:220, 180:230]
    img[0:40, 0:50] = eye
    # 灰度图像
    img_gray = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)
    # 二值图像
    ret, binary = cv2.threshold(img_gray, 127, 255, cv2.THRESH_BINARY)
    plt.subplot(221), plt.imshow(img, ‘gray‘), plt.title(‘ORIGINAL‘)
    plt.subplot(222), plt.imshow(img_gray, ‘gray‘), plt.title(‘img_gray‘)
    plt.subplot(223), plt.imshow(binary, ‘gray‘), plt.title(‘binary‘)
    plt.show()
    # plt.imshow(img)
    # plt.show()
    # 拆分通道
    b, g, r = cv2.split(img)
    # or
    # b = img[:,:,0]
    # set 单通道
    # img[:,:,2] = 0
    # 合成一张新图 完成 BGR 至 RGB 的转换
    img1 = cv2.merge((r, g, b)) # 注意rgb的顺序
    # or 完成 BGR 至 RGB 的转换
    #img3 = img[:, :, ::-1]
    # or 完成 BGR 至 RGB 的转换
    #img4 = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)

    # 图片写入
    #cv2.imwrite("demo.jpg", img1)
    plt.imshow(img1)
    plt.show()

    # cv2.imshow("img", img)
    # cv2.waitKey(0)
    # cv.waitKey(delay)是一个键盘绑定函数。其参数是以毫秒为单位的时间。该函数等待任何键盘事件指定的毫秒。
    # 如果您在这段时间内按下任何键，程序将继续运行。如果 0 被传递，它将无限期地等待一次敲击键。
    # cv2.destroyAllWindows()

    BLUE = [255, 0, 0]
    # 复制
    replicate = cv2.copyMakeBorder(img1, 10, 10, 10, 10, cv2.BORDER_REPLICATE)
    # 边框将是边框元素的镜像，例如：fedcba | abcdefgh | hgfedcb
    reflect = cv2.copyMakeBorder(img1, 10, 10, 10, 10, cv2.BORDER_REFLECT)
    # 与上述相同，但略有变化，例如：gfedcb | abcdefgh | gfedcba
    reflect101 = cv2.copyMakeBorder(img1, 10, 10, 10, 10, cv2.BORDER_REFLECT_101)
    # 无法解释，它看起来像这样：cdefgh | abcdefgh | abcdefg
    wrap = cv2.copyMakeBorder(img1, 10, 10, 10, 10, cv2.BORDER_WRAP)
    # 添加恒定的彩色边框。 该值应作为下一个参数给出。
    constant = cv2.copyMakeBorder(img1, 10, 10, 10, 10, cv2.BORDER_CONSTANT, value=BLUE)
    plt.subplot(231), plt.imshow(img1, ‘gray‘), plt.title(‘ORIGINAL‘)
    plt.subplot(232), plt.imshow(replicate, ‘gray‘), plt.title(‘REPLICATE‘)
    plt.subplot(233), plt.imshow(reflect, ‘gray‘), plt.title(‘REFLECT‘)
    plt.subplot(234), plt.imshow(reflect101, ‘gray‘), plt.title(‘REFLECT_101‘)
    plt.subplot(235), plt.imshow(wrap, ‘gray‘), plt.title(‘WRAP‘)
    plt.subplot(236), plt.imshow(constant, ‘gray‘), plt.title(‘CONSTANT‘)
    plt.show()



if __name__ == ‘__main__‘:
    pil_demo01()
    cv2_demo01()

"""
https://pillow.readthedocs.io/en/stable/handbook/image-file-formats.html#fully-supported-formats

https://pillow.readthedocs.io/en/stable/handbook/concepts.html
图像的模式定义了图像中像素的类型和深度。
每个像素使用比特深度的全范围。
1位像素的范围是0-1,8位像素的范围是0-255，以此类推。
im.mode 有以下标准模式：
1 (1-bit pixels, black and white, stored with one pixel per byte)
L (8-bit pixels, black and white)
P (8-bit pixels, mapped to any other mode using a color palette)
RGB (3x8-bit pixels, true color)
RGBA (4x8-bit pixels, true color with transparency mask)
CMYK (4x8-bit pixels, color separation)
YCbCr (3x8-bit pixels, color video format)
Note that this refers to the JPEG, and not the ITU-R BT.2020, standard
LAB (3x8-bit pixels, the L*a*b color space)
HSV (3x8-bit pixels, Hue, Saturation, Value color space)
I (32-bit signed integer pixels)
F (32-bit floating point pixels)
特殊模式：
LA (L with alpha)
PA (P with alpha)
RGBX (true color with padding)
RGBa (true color with premultiplied alpha)
La (L with premultiplied alpha)
I;16 (16-bit unsigned integer pixels)
I;16L (16-bit little endian unsigned integer pixels)
I;16B (16-bit big endian unsigned integer pixels)
I;16N (16-bit native endian unsigned integer pixels)
BGR;15 (15-bit reversed true colour)
BGR;16 (16-bit reversed true colour)
BGR;24 (24-bit reversed true colour)
BGR;32 (32-bit reversed true colour)
"""

以上是关于静态图像介绍的主要内容，如果未能解决你的问题，请参考以下文章

片段内带有基本适配器的列表视图

静态图像介绍

片段内部静态类和gradle问题

分享前端开发常用代码片段

收藏|分享前端开发常用代码片段

关于js----------------分享前端开发常用代码片段