YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Chinese, Simplified subtitles

← Instagram的Kevin Systrom解释像素和滤镜工作原理

听Instagram发起人解释图像是如何由二进制数值表示的,以及滤镜的工作原理。这个视频是Code.org视频系列讲座的一部分,是未来Computer Science Principles高中的课程。可以通过http://code.org/educate/csp了解更多课程信息。更多的Code.org教育视频尽在http://code.org/educate/videos。

鸣谢Kevin Systrom,Instagram以及Piper Hanson在http://piperhanson.com的摄影作品。

Get Embed Code
17 Languages

Showing Revision 5 created 06/14/2018 by Nesting.

  1. 像素简介
  2. (按快门声)赞!

  3. 我和Mike一起成立了Instagram

  4. 我们开始只是想用手机照片做些有新意的事儿

  5. 毕竟这是人们第一次那么在意口袋里的计算机

  6. 我们认为在未来五年照片分享可能是最大的机会
  7. 于是我们顺从内心,开始花时间来做这件事
  8. 有app或者想法去解决x, y, z还不够
  9. 更重要的是解决实际问题,供人们真正的使用
  10. 问题是:你要解决什么问题?
  11. 最初为了在屏幕上显示照片,人们需要对照片进行数据分解
  12. 1957年,一名计算机工程师Russell Kirsch
  13. 给他儿子拍了一张照片并扫描了下来
  14. 这是第一张数字图像:有颗粒感的黑白婴儿照
  15. 像素就这样诞生了
  16. 像素是个有趣的概念,因为他们不容易被看到
  17. 但实际上,如果你不断放大显示屏
  18. 就会发现显示屏是由非常小的光点组成
  19. 更有意思的是,每一个小光点是由更小的不同颜色光点构成
  20. 光点颜色有红,绿,蓝
  21. 从远处看,这些像素构成了图像
  22. 从前面看,他们只是能够亮暗的光点
  23. 正是他们构成了我们每天从电脑上看到的照片
  24. 你总能听到一个词:分辨率
  25. 计算机科学家和器材生产商都会提到它
  26. 分辨率是一个二维值,用于表示屏幕上像素数
  27. 当我还是个高中生的时候,分辨率只有640 x 480
  28. 今天分辨率则大了很多
  29. 除了分辨率以外,密度也很重要
  30. 比如智能手机,在有相同像素的前提下
  31. 像素密度更大的图像就更可以更细腻
  32. 那么,如何在一个文件里存储这些像素值呢?
  33. 其实你只是存储了许多红绿蓝的三元数组
  34. 他们则表示每一个像素

  35. 像素的数值范围是0-255
  36. 0非常暗,255非常亮
  37. 这个三元数值一起表示一个像素
  38. 一个图像文件,无论是JPEG,GIF 还是PNG
  39. 包含了百万级的红绿蓝三元值
  40. 那么计算机是如何存储这些数据的呢?
  41. 所有视觉和计算数据是用bit(比特)表征
  42. 每bit有两个状态:开和关
  43. 计算机使用对应的1或0二元值
  44. 所以图像是由一堆01数值构成的
  45. 为什么RGB数值的范围是0到255呢?
  46. 每一个颜色频道是由8bit构成
  47. 8bit构成一个1BYTE(字节)
  48. 如果你了解二元数值系统
  49. 那么8bit最大的数值是255,也就是一行全是1
  50. 最小的8bit数值是0,也就是一行全是0
  51. 因此0到255对应了每个颜色通道里256个灰度值
  52. 比如我们来表示青绿色的像素
  53. 在传统的十进制数值系统里,64有些红
  54. 224很绿,208比较蓝
  55. 但是计算机会青绿色存储成01000000
  56. 11100000
  57. 11010000
  58. 我们使用24个二进制值表示一个像素
  59. 计算机系统通常使用16进制,而不是二进制来表示颜色
  60. 所以我们只用6个十六进制表示同样的颜色:40 E0 D0
  61. 这就短多了
  62. 如果你想改变图像颜色,怎么办?
  63. 使用对应函数,输入为像素的红蓝绿数值
  64. 然后将其对应成新的红蓝绿数值
  65. 比如你想将图像变暗
  66. 一种方法是用输入的红绿蓝数值减去50
  67. 很明显,结果不能小于0,然后得到数值
  68. 如果输入是RGB,那么输出是R-50,G-50,B-50
  69. 你能看到输入图像是某个亮度,输出图像就变暗许多
  70. 许多人可能没有意识到,Instagram不止是做图像滤镜
  71. 或者仅仅把图片变酷
  72. 他的愿景更加重要
  73. 那就是如何将人们联系起来
  74. 他也不只是看朋友家人的照片,我们希望看到世界的变化
  75. 可能在海外,可能是社会活动
  76. 你可以通过视觉图片的方式获知这些信息
  77. 这才是我们快速成长并成为受欢迎媒介的原因
  78. 学习更多尽在studio.code.org