Geekly articles weekly

通过PHP为Instagram创建故事

参赛作品


最近，人们比浏览照片更愿意在社交网络上观看视频。 Storis在Instagram上获得的观看次数比仅是一张照片要多3-4倍。

当然，我们不会忘记社交网络不仅要展示自己，结识其他人，而且还要宣传他们的商品，服务等。 我们长期以来一直学习如何从VKontakte网站上发布新发布的新闻。 但是，如果我们走得更远呢？ 如果您以视频形式提交此信息怎么办？ 还是在Instagram上上传有趣的视频故事来吸引更多观众关注？

因此，我想到了创建一个库的想法，该库使我可以从这些对象的照片，文本和动画创建简短的视频。 是的，有人可以说已经有一些服务可以让您做到这一点，为什么还要拿出自行车呢？ 首先-我想要，其次-我可以，第三-它是免费的。

本文介绍如何使用该库，如何使用PHP创建自己的故事。

局限性


应该立即说，该库使用FFmpeg生成最终的视频文件。 FFmpeg必须安装在服务器上。 也许将来会有一个将故事生成为gif文件的选项，但是对我自己来说，由于工作，我选择了视频文件。

准备工作


该库是通过作曲家安装的

composer require borodin-vasiliy/php-stories

建立故事


现在该创造自己的故事了。 例如，我们希望看到一只小猫的背景照片，该照片在整个故事中显得更近一些，并在其上显示2个带有外观动画的文本。 容易！

Storis初始化
 //    5    720x1280 $stories = new Stories([ "width" => 720, "height" => 1280, "duration" => 5 ]);


如您所见，所有参数都作为数组传递。 目前，您可以更改：

  • “宽度”-Storis宽度（以像素为单位）
  • “高度”-高度（以像素为单位）
  • “持续时间”-持续时间（以秒为单位）
  • “ Fps”-每秒的帧数，根据标准-30

接下来，我们需要在未来的故事中添加3个对象（图片和2个文本）。 目前，该库允许您添加4种类型的不同对象-图片，文本，椭圆，矩形。 每个对象都有其自己的方法，该方法的参数是所添加对象的参数数组。

对象具有相同的参数：

  • “顶部”-从故事顶部开始的对象位置
  • “左”-元素从故事左边缘开始的位置
  • “不透明度”-透明度，如CSS [0 ... 1]
  • “旋转”-对象的旋转角度[0 ... 359]
  • “ Z-index”-一层，就像CSS中的z-index一样-越大，该层在框架元素上的位置越高
  • “开始”-将项目添加到故事中的第二个时间
  • “结束”-应从故事中删除该项目的第二个时间

对于每种类型的对象（例如图片）而言，都是如此独特：

  • “路径”-我们要添加图像的路径
  • “比例”-图像尺寸乘数（近似值）

在故事中添加图片
 //      $main_image = $dir."/images/1.jpg"; //   ) list($image_width, $image_height) = getimagesize($main_image); // ,      ,       $image_start_scale = round(1280 / $image_height, 1); //   $stories->addImage([ "path" => $main_image, "top" => round(-1 * ($image_height * $image_start_scale - $stories_height) / 2), //        "left" => round(-1 * ($image_width * $image_start_scale - $stories_width) / 2), //        "scale" => $image_start_scale ]);


做完了！ 如果现在产生一个故事，那么我们将在5秒钟内欣赏这只猫。 但是我保证会有动画，让我们添加它。

使用单独的方法添加对象的动画，该方法的参数是对象应到达的参数数组。 一个对象的动画可以是任意数量。 值得一提的是，该库的语法暗含了Fluent接口的使用。

添加图片和动画
 //      $main_image = $dir."/images/1.jpg"; //   ) list($image_width, $image_height) = getimagesize($main_image); // ,      ,       $image_start_scale = round(1280 / $image_height, 1); // $image_end_scale = $image_start_scale + 0.5; //     $stories->addImage([ "path" => $main_image, "top" => round(-1 * ($image_height * $image_start_scale - $stories_height) / 2), //        "left" => round(-1 * ($image_width * $image_start_scale - $stories_width) / 2), //        "scale" => $image_start_scale ])->addAnimation([ "top" => round(-1 * ($image_height * $image_end_scale - $stories_height) / 2), //         "left" => round(-1 * ($image_width * $image_end_scale - $stories_width) / 2),//         "scale" => $image_end_scale, ]);


您可能已经注意到，addAnimation方法用于添加动画。 动画所需的参数：

  • “开始”-动画应该开始的第二个时间。 如果未设置，则在添加对象时动画将开始。
  • “持续时间”-动画的持续时间（以秒为单位）

动画可以影响的参数数组：

  • “顶部”
  • “左”
  • “不透明度”
  • “旋转”
  • “比例”
  • “宽度”
  • “身高”

添加文字
 //   $stories->addText([ "text" => "Hello world!", "path" => $dir."/fonts/helvetica.ttf", "size" => 130, "color" => "#ffffff", "width" => 620, "top" => 200, "left" => 50, "opacity" => 0, "shadow" => [ "color" => "#000000", "top" => 4, "left" => 4 ] ])->addAnimation([ "duration" => 1, "opacity" => 1 ])->addAnimation([ "start" => 4.5, "duration" => 0.5, "opacity" => 0 ]); //   $stories->addText([ "text" => "This is a test of function adding text", "path" => $dir."/fonts/helvetica.ttf", "size" => 100, "color" => "#ffffff", "width" => 620, "top" => 750, "left" => 50, "start" => 0.5, "opacity" => 0, "shadow" => [ "color" => "#000000", "top" => 4, "left" => 4 ] ])->addAnimation([ "duration" => 1, "opacity" => 1 ])->addAnimation([ "start" => 4.5, "duration" => 0.5, "opacity" => 0 ]);


文本具有其自己的唯一参数：

  • “文本”-您要显示的文本-必填
  • “路径”-字体（.ttf）的路径-必需
  • “大小”-字体大小
  • “颜色”-颜色，例如“ #ffffff”
  • “宽度”-文本块的宽度，如果设置，则文本将自动分成几行
  • “对齐”-文本对齐[左，中，右]
  • “影子”是一个影子

阴影也是参数数组：

  • “颜色”-阴影的颜色
  • “顶部”-从上方缩进
  • “左”-左边界

故事产生
 $file_hash = $stories->generate("/tmp");


结果，我们获得了作为参数传递的临时文件夹中文件的名称。

工作成果




值得一提的是，创建故事的速度不是很好，在一台好的计算机上，一分钟的时间会生成5秒的剪辑，而在一台简单的服务器上会生成3分钟以上的剪辑。

发展计划


  • 添加标准动画脚本以减少代码
  • 文字动画（逐行显示等）
  • 文本的背景。

我希望有人会觉得这个库有用。 我很高兴听到职能部门的批评和希望。

Git仓库

Source: https://habr.com/ru/post/zh-CN436514/

More articles:


All Articles