🌙 📼 🏸 Membuat cerita untuk Instagram dari PHP 🐄 ♎️ 🧠

Entri

Baru-baru ini, orang lebih bersedia untuk menonton video di jejaring sosial daripada menjelajah foto. Storis di Instagram memperoleh tampilan 3-4 kali lebih banyak dari sekadar foto yang ditata.

Dan tentu saja, kita tidak berhenti lupa bahwa jejaring sosial tidak hanya untuk menunjukkan diri mereka sendiri, untuk melihat orang lain, tetapi juga untuk mempromosikan barang, layanan, dll. Kami telah lama belajar cara memposting berita yang baru dipublikasikan dari situs di VKontakte. Tetapi bagaimana jika kita melangkah lebih jauh? Bagaimana jika Anda mengirimkan informasi ini sebagai video? Atau unggah cerita video yang menarik di Instagram untuk menarik lebih banyak perhatian penonton?

Jadi saya muncul dengan ide membuat perpustakaan yang memungkinkan saya membuat video pendek dari foto, teks, dan animasi dari objek-objek ini. Ya, seseorang dapat mengatakan bahwa sudah ada layanan yang memungkinkan Anda melakukan ini, dan mengapa datang dengan sepeda? Pertama - saya mau, kedua - saya bisa, ketiga - itu akan gratis.

Artikel ini adalah tentang cara bekerja dengan perpustakaan, cara membuat cerita Anda sendiri dari PHP.

Keterbatasan

Harus segera dikatakan bahwa perpustakaan menggunakan FFmpeg untuk menghasilkan file video akhir. FFmpeg harus diinstal di server. Mungkin di masa depan, akan ada opsi untuk menghasilkan cerita sebagai file gif, tetapi untuk diri saya sendiri, saya memilih file video sebagai hasil dari pekerjaan.

Persiapan

Perpustakaan diinstal melalui komposer

composer require borodin-vasiliy/php-stories

Menciptakan cerita

Saatnya untuk membuat cerita Anda sendiri. Sebagai contoh, kami ingin melihat foto latar belakang anak kucing, yang sedikit lebih dekat di sepanjang cerita dan menampilkan 2 teks di atasnya dengan animasi penampilan. Mudah!

Inisialisasi Storis

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

Seperti yang Anda lihat, semua parameter dilewatkan sebagai array. Saat ini, Anda dapat mengubah:

"Width" - Lebar storis dalam piksel
"Tinggi" - Tinggi dalam piksel
"Durasi" - Durasi dalam detik
"Fps" - Jumlah bingkai per detik, sesuai dengan standar - 30

Selanjutnya, kita perlu menambahkan 3 objek (gambar dan 2 teks) ke cerita masa depan kita. Saat ini, perpustakaan memungkinkan Anda untuk menambahkan 4 jenis objek yang berbeda - gambar, teks, eleps, persegi panjang. Setiap objek memiliki metode sendiri, argumen metode adalah array dari parameter objek yang ditambahkan.

Objek memiliki sebagai parameter umum:

"Top" - posisi objek dari tepi atas cerita
"Kiri" - posisi elemen dari tepi kiri cerita
"Opacity" - transparansi, seperti dalam css [0 ... 1]
"Putar" - sudut rotasi objek [0 ... 359]
"Z-index" - sebuah layer, seperti z-index dalam css - semakin besar, semakin tinggi layer akan terletak pada elemen frame
"Mulai" - yang kedua saat item harus ditambahkan ke cerita
"End" - yang kedua saat item tersebut harus dihapus dari cerita

Sangat unik untuk setiap jenis objek, misalnya, untuk gambar:

"Path" - Jalur ke gambar yang ingin kita tambahkan
"Skala" - Pengganda ukuran gambar (perkiraan)

Menambahkan gambar ke cerita

 //      $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 ]);

Selesai! Jika sekarang menghasilkan cerita, maka selama 5 detik kami akan mengagumi kucing. Tapi saya berjanji akan ada animasi, mari kita tambahkan.

Animasi untuk objek ditambahkan menggunakan metode yang terpisah, argumen yang merupakan array parameter yang objek harus datang. Animasi untuk satu objek dapat berupa angka apa saja. Perlu dikatakan bahwa sintaks perpustakaan menyiratkan penggunaan Antarmuka Fasih.

Menambahkan gambar dan animasi

 //      $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, ]);

Seperti yang mungkin Anda perhatikan, metode addAnimation digunakan untuk menambahkan animasi. Parameter yang diperlukan untuk animasi:

"Mulai" - Yang kedua saat animasi harus dimulai. Jika tidak disetel, animasi akan dimulai ketika objek ditambahkan.
"Durasi" - Durasi animasi dalam hitungan detik

Array parameter yang dapat dipengaruhi animasi:

"Atas"
"Kiri"
"Opacity"
"Putar"
"Skala"
"Lebar"
"Tinggi"

Menambahkan Teks

 //   $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 ]);

Teks memiliki parameter uniknya sendiri:

"Teks" - teks yang ingin Anda tampilkan - wajib ada
"Path" - path ke font (.ttf) - wajib ada
"Ukuran" - ukuran font
"Warna" - warna, misalnya "#ffffff"
"Lebar" - lebar blok teks, jika diatur, teks akan secara otomatis dibagi menjadi beberapa baris
"Align" - perataan teks [kiri, tengah, kanan]
"Bayangan" adalah bayangan

Bayangan juga merupakan larik parameter:

"Warna" - warna bayangan
"Top" - lekukan dari atas
"Kiri" - margin kiri

Generasi cerita

 $file_hash = $stories->generate("/tmp");

Akibatnya, kami mendapatkan nama file yang ada di folder sementara yang dilewatkan sebagai argumen.

Hasil kerja

Perlu dikatakan bahwa kecepatan membuat cerita tidak bagus, di komputer yang bagus, klip 5 detik dihasilkan dalam urutan satu menit, pada server sederhana lebih dari 3 menit.

Rencana pengembangan

Menambahkan skrip animasi standar untuk mengurangi kode
Animasi teks (tampilan baris demi baris, dll.)
Latar belakang untuk teks.

Saya harap seseorang akan menemukan perpustakaan ini bermanfaat. Saya akan senang mendengar kritik dan harapan dalam hal fungsional.

Git repositori