文章首发于个人博客：http://heavenru.com最近做项目需要实现一个sprite动画，素材党只提供了一个短视频素材，所以在实现sprite动画之前先介绍一下这两个工具来帮助我们更好的实现我们的需求。在这篇文章中，我主要介绍两个命令行工具将短视频文件转换成精灵图片，以及如何使用canvas绘制精灵动画。两个工具的官方地址如下：ffmpegmontage1，ffmpeg视频转图片工具ffmpeg是“一个完整的跨平台解决方案，一个录制、转换和流式传输音频和视频的工具”，其作用不限于介绍的内容本文有兴趣的同学可以去官网了解更多。将视频转为图片输出基本用法./ffmpeg-ijellyfish.mp4-vfscale=138:-1-r8%04d.png-i视频流输入URL-vf创建filter指定的过滤器，并使用它过滤流,filter是对应用于流的过滤器的描述，并且对于相同类型的流必须具有单个输入和单个输出。对应的filter参数必须跟这个，否则不会是有效的scale视频缩放，scale=width:height其中，如果height=-1，表示自适应高度，按照视频的宽高比输出，后面跟这个scale=width:height,setar=16:9可以指定输出宽高比-r视频输出fps值，值越大，切片视频的fps越高，别名-framerate，比如我们要裁剪视频在60fps和export图片，使用-r60-aspect视频输出宽高比，比如常用的4:3、16:9都是标准参数用法-sscroppingstartposition，表示从视频的某个时刻开始裁剪，即是一个很有用的参数，这个参数的位置放在-i前面，参数格式hh:mm:ss表示时、分、秒-tduration，表示需要剪切的视频长度，通常与-ss一起使用，可以裁剪任意视频时间比如我们需要裁剪5-10秒的视频导出，可以使用ffmgeg-ss00:00:05-t00:00:10-vframes来设置输出视频帧数，即-frames:v的别名-qscale:v2指定输出图像的质量，取值范围2-31，值越大，质量越差，推荐值为2-5综合应用：//在60秒处截取一张图片ffmpeg-ss60-iinput.mp4-qscale:v2-vframes1output.jpg//以60fps从视频中导出所有图片ffmpeg-i输入.mp4-r60%04d.png2.将多张图片合并为一张图片蒙太奇通过上面介绍的工具，我们可以很方便的将一段视频转换成一系列的图片文件，那么这时候我们就可以使用蒙太奇工具将前面导出的n张图片合并为一张图片基本用法：montage-border0-geometry138x-tile89x-quality100%*.pngmyvideo.jpg-tile表示一行中需要合并的图片数量，超过这个数量会合并新的行-quality代表合成图片的质量，取值范围0-100%3.绘制canvassprite动画在开始编辑代码之前，先梳理一下需求：动画需要能够循环播放Framestartrendering指定要渲染的动画帧数。动画需要能够控制渲染帧率。当sprite图片不是单行时，一定要能自动换行渲染OK。了解了我们的需求之后，我们开始写代码让我们从一个简单的参数合并工具方法开始var_extends=Object.assign||函数（目标）{for(vari=1;i
