目环境

语言： Python3

工具：Pycharm

想要学习Python。关注小编头条号，私信【学习资料】，即可免费领取一整套系统的板Python学习教程！

工具准备

ffmpeg，刚才说的处理视频的程序，可去官网下载https://www.ffmpeg.org/download.html#build-windows。

PIL 包：Python 的图形处理库。

numpy 包：Python 的一种开源的数值计算扩展，可用来存储和处理大型矩阵。

程序结构

我写了三个 py 文件，一个用来把视频转换为图片，一个用来把图片转为编码，最后一个来做最后的执行。

视频处理

下面的 ffmpeg 程序后面的几个参数我解释一下，-i 后面需要指定输入的文件名。-f 指定格式(音频或视频格式)。-vframes 设置转换多少桢(frame)的视频。-ss 从指定的时间(s)截图。

def getImage(videoPath, imagePath):
 img_count=1
 crop_time=0.0
 while crop_time <=15.0:
 os.system('ffmpeg -i %s -f image2 -ss %s -vframes 1 %s.png'% (videoPath, str(crop_time), imagePath + str(img_count)))
 img_count +=1
 print('Geting Image ' + str(img_count) + '.png' + ' from time ' + str(crop_time))
 crop_time +=0.1
 print('图片收集结束！！！')

用这个函数获取视频的每帧图片，给出的视频存放路径和获取图片的路径调用此函数就可以获取视频每帧的图片，我设置了每 0.1 秒保存一张图片。

图片转换

用 convert('L') 把图片转换为为二值图像，非黑即白。但是它每个像素用 8 个bit 表示，0 表示黑，255 表示白。

def image2txt(inputFile, outputFile):
 im=Image.open(inputFile).convert('L')
 charWidth=100
 im=im.resize((charWidth, charWidth // 2))
 target_width, target_height=im.size
 data=numpy.array(im)[:target_height, :target_width]
 f=open(outputFile, 'w',encoding='utf-8')
 for row in data:
 for pixel in row:
 if pixel > 127:
 f.write('1')
 else:
 f.write(' ')
 f.write('\n')
 f.close() 

执行这个函数不会有数据返回，用下一个 go.py 文件导入调用才行。

控制输出

调用上个函数 image2txt，图片转换为编码。

def getTxt(imagePath, txtPath):
 img_count=1
 while img_count <=len(os.listdir(imagePath)):
 imageFile=imagePath + str(img_count) + '.png'
 txtFile=txtPath + str(img_count) + '.txt'
 image2txt.image2txt(imageFile, txtFile)
 print('MJ舞蹈加载中： ' + str(img_count) + '%')
 img_count +=1

通过 os.system('cls') 控制屏幕的及时清除，以便及时显示下一帧图片的编码。

def play(txtPath):
 txt_count=1
 while txt_count <=len(os.listdir(txtPath)):
 os.system('type ' + txtPath + str(txt_count) + '.txt')
 txt_count +=1
 os.system('cls')

给出编码文件路径和图片路径，执行函数。

txt_dir_path=r'D:\MJ\mjtxt' + '\\'
img_dir_path=r'D:\MJ\mjimages' + '\\'
getTxt(img_dir_path, txt_dir_path)
play(txt_dir_path)

收集完视频图片后在 cmd 控制台执行 go.py 文件，编码出现后点击视频播放就能达到刚才视频中的效果了。

你们可以用自己的视频去做，视频背景固定的话效果更好。

写在最后

方法教给大家了，视频素材可以优化，大家可以自己收集好的视频素材，发到朋友圈，让代码骚动起来！

算机分为前端和后端，这两大模块组成了计算机上或者手机应用上的APP。今天来说说前端。

说之前网页大家都知道，那么网页到底是什么？谁知道？

网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，您的网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。

网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

网页又分为两种：

静态页

静态网页，其内容是预先确定的，并存储在Web服务器或者本地计算机/服务器之上。

特点：

1. 制作速度快，成本低。
2. 模板一旦确定下来，不容易修改，更新比较费时费事。
3. 常用于制作一些固定板式的页面。
4. 通常用于文本和图像组成，常用于子页面的内容介绍。
5. 对服务器性能要求较低，但对存储压力相对较大。

动态页

动态网页，是取决于由用户提供的参数，并根据存储在数据库中的网站上的数据中创建的页面。

通俗地讲，静态页是照片，每个人看都是一样的，而动态页则是镜子，不同的人（不同的参数）看都不相同。

前端有个标准，你知道吗？

万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

W3C为解决 Web 应用中不同平台、技术和开发者带来的不兼容问题，保障 Web 信息的顺利和完整流通，万维网联盟制定了一系列标准并督促 Web 应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。

W3C也制定了包括XML和CSS等的众多影响深远的标准规范。 但是，W3C 制定的 web 标准似乎并非强制而只是推荐标准。因此部分网站仍然不能完全实现这些标准。特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代码。

W3C 致力于对web 进行标准化

W3C 创建并维护了 WWW 标准

W3C 标准被称为 W3C 推荐标准（W3C Recommendations）W3C 最重要的工作是发展 web 规范，也就是描述 web 通信协议（比如 HTML 和 XML）和其他构建模块的“推荐标准”。

那么前端是什么？

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

上图是写网页的编程语言中的三个。

那么前端工程师所需要的技术有哪些？都是什么？

HTML、CSS、JavaScript

这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。

那么这三个语言都是干什么的？能做什么？

HTML

指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。

CSS

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

Javascript

是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

如果说HTML是一个框架，CSS就是给这个框架添加装饰品，JS就是在CSS上添加更炫酷的样式。比如：一只鸟小的时候没有羽毛，就相当于网页只有HTML；而有了羽毛之后，就相当于添加了CSS；完全成长后羽毛非常漂亮，还能飞翔，就相当于添加了JS。（如上图，就可以看作HTML+CSS+JS网页的观赏度）

掌握以上知识技能，就可以开发了吗？

1. 掌握各种修图软件，如PS\Fireworks\AI，不要求专业设计师水平，但要会用会改，今天是一专多能的时代，光会编程讨不好饭碗的；
2. 精通JavaScript、jQuery、vue、 react、angular等页面效果框架，这是前端工程师的最核心技能，是专做页面效果的技术。其实精通了JavaScript，后端编程语言，如.NET、PHP、Ruby都很容易掌握，因为其原理是一样的；
3. 精通一二种模板语言，并能修改，如织梦或wordpress的模板；
4. 掌握thinkphp与zend框架，能修改此类开源源码；
5. 掌握html5与sencha，这是做手机等移动设备的页面前端技术；
6. 掌握一二种后端编程语言，如PHP、.NET、JAVA，能读懂后端源码，实际上其原理跟JS差不多；
7. 掌握node.js，熟悉各种自动化部署工具；
8. 前端是重视用户体验的，不是靠美工给的页面 做出来就行了，那样不是一个合格的前端。

前端开发很快就能出效果，让人很有成就感，因为有技术做出来的页面是非常炫酷的，如果你可以，那么你就可以在女生面前打开一个炫酷的网页说，这是我做出来的。你可以想想那是什么感觉。

有个小问题，网页有时候会出现404，或者其他数字，你知道是什么意思吗？