本文将介绍如何用 ffmpeg + canvas 写一个在线可视化音视频编辑工具: 如何用 canvas 实现一个视频轨道; 如何结合轨道、播放器和 ffmpeg, 实现视频编辑可视化；

✨ 在前端领域，如果只是懂 `Vue` 或者 `React` ，未来在职场的竞争力可能会比较弱。 根据我多年在家待业经验来看，前端未来在 `数据可视化` 和 `AI` 这两个领域会比较香。

前面我们实现了一个简单的canvas库，现在我们用它来实现一个简易版流程图，在实际应用中检验它的效果。

canvas作为Html5标准的新特性，在前端诸如海报、动画、图片编辑、文档编辑、数据可视化等有着广阔的落地场景，作为前端摸索图形化处理的入门，为学习webGL铺路。

最近开发轮播图管理功能，为了使上传的图片符合轮播图的尺寸，在上传时需要将图片裁剪成一定的比例后才能上传。这里记录一下使用 antd 的 Upload 上传组件和 react-copper 实现图片裁剪

最近实现了一个“在线”批改的功能，其中包括截图，旋转，放大缩小，自适应等功能，调研了几个可支持截图的api，最终选择cropper来实现，以下介绍过程中总结的技巧以及避坑指南。

如图，可以对指定的图片进行裁剪，可以自己选择裁剪的交互方式，如大小、纵横比等 还可以预览裁剪区域，确认裁剪后可以生成一个包含裁剪图的canvas对象，借助canvas的toDataURL方法可以生成一张Base64格式的图片。还有另外一种不使用canvas的方式，利用该工具丰富…

先给大家看一下最终效果。 将裁剪后的数据保存为blob发送至后端。 一开始制作这个需求思路有两个，使用canvas原生或者寻找现成的库，对比了一番觉得canvas实现时间耗费较长，且秉承着不重复造轮子的原则（其实是菜），决定使用Cropper.js。官方封装了很多参数、方法、事…

sharp 是 Node.js 平台上相当热门的一个图像处理库，其实际上是基于 C 语言编写 的 libvips 库封装而来，因此高性能也成了 sharp 的一大卖点。sharp 可以方便地实现常见的图片编辑操作，如裁剪、格式转换、旋转变换、滤镜添加等。