从Storyboard到DIY实现一个漫画生成器-01

Storyboard

谷歌的安卓应用

用户只需拍摄一段视频并将其加载到 Storyboard 中即可将视频转换为单页漫画的布局。该应用会自动选择有趣的帧，并将其应用于6种视觉样式中的一种。生成的漫画大约1.6万亿种不同的可能性！

技术

图像内容识别

人物分割

图片裁切

图片排版算法

图像编码和解码技术

如何使用 Javascript 实现一个漫画生成器呢？

为什么选择 Javascript ？因为这是个轻量级的实现方案，不需要这么复杂的深度学习模型服务的部署，也不用开发后端复杂的一套代码。而且还方便在github直接分享给任何人体验。

图像内容识别，我们可以选择tensorflowJS版本的 mobilenet 模型来识别内容，posenet 来识别多个人物，然后 smartscrop.js 来实现图片的智能裁切，排版通过预设的模版，通过 canvas 的 globalCompositeOperation 来控制模版的叠加效果，至于图像编码跟解码技术，video 通过 canvas 的 drawImage 即可获得。技术上比较难的就是获取视频中哪些关键帧作为漫画的内容。

今天先更新第一部分内容：

自动把一张图片按照预设的模版进行裁切

——图片排版算法

效果如下：

主要熟悉 canvas 的 globalCompositeOperation 操作。代码如下：

var canvas=document.createElement('canvas'),    ctx=canvas.getContext('2d');

var mask=document.querySelector('.mask');canvas.width=mask.naturalWidth;canvas.height=mask.naturalHeight;

var img=document.querySelector('.pnew');ctx.drawImage(mask,0,0);ctx.globalCompositeOperation='source-in';ctx.drawImage(img,0,0,canvas.width,canvas.height);

document.querySelector('#result').appendChild(canvas);

上面的代码，请根据实际的情况修改。先把图片蒙版画到 canvas 上，通过 source-in 的设置，再把待处理的图片画到 canvas 上。这里蒙版建议使用 svg 的格式，通过 sketch 等软件直接制作。

我们稍微拓展下，可以把漫画里的每一块做成蒙版，然后裁切目标图片：

当然蒙版也可以换成任何形状，比如：

本期先更新到这里，后续更新其他技术，交流可以加入 mixlab 的微信群。