Videolarınızı GİF-e dönüştürün

Günümüzde sosyal medyada GİF-lere rastlamayan yoktur. Her yeni gündeme ait anında GİF animasyonlar hazırlanıyor ve sosyal medyada dünyanın bir ucundan öbür ucuna servis ediliyor.

Peki bu GİF animasyonlar nasıl yapılıyor? Aslında bazı eklentiler kullanarak çok basit şekilde animasyonlar hazırlaya bilirsiniz.

Bu yazıda birkaç örnek paylaşacağım. Kullanacağım eklentinin ismi Gifshot.  Buradan online deneme yapabilirsiniz.

Gelelim kendi video, resim veya webcam görüntülerimizi kullanarak GİF oluşturmaya. Öncelikle yukarıda paylaştığım Gifshot github sayfasından gerekli eklentiyi indirmeniz gerekiyor. Eklenti klasörü içerisinde dist>gifshot.min.js dosyasını sayfanıza aşağıdaki şekilde ekleyin:

<script src="gifshot.min.js"></script>

Şimdi ilk olarak Video dosyamızdan bir GİF oluşturalım. Bunun için aşağıdaki kodu kullanacağız:

gifshot.createGIF({
        'video': ['out.mp4'],
        'numFrames': 30,
        'gifWidth': 300,
        'gifHeight': 200,
        'text':'www.anarsamadov.net',
        'progressCallback': function(captureProgress) {
            captureProgress=Number(captureProgress)*100
            console.log(captureProgress.toFixed(2)+'%');
        },
    },function(obj) {
        if(!obj.error) {
            var image = obj.image,
                animatedImage = document.createElement('img');
            animatedImage.src = image;
            document.body.appendChild(animatedImage);
        }
    });

Öncelikle kullandığım videoyu buradan indirebilirsiniz. Eklentinin kullanım şeklini buradan daha detaylı şekilde okuyabilirsiniz. Yazdığımız kodda video anahtarı kullanacağınız videonun yolunu, numFrames anahtarına videodan kesilecek alanın uzunluğunu, burada uzunluk 10 frame 1 saniye olarak geçiyor, gifWidth ve gifHeight oluşturacağınız GİF dosyasının genişlik ve yüksekliğini, text anahtarı GİF üzerine yazmak istediğiniz metni, progressCallback anahtarı ise GİF dosyasının oluşturulduğu süreyi belirtiyor. Bu kodu çalıştırdığınızda sonuç aşağıdaki şekilde olacaktır:

Şimdi gelelim birkaç resmi birleştirerek GİF oluşturmaya. Bunun için de aşağıdaki kod parçacığını kullanacağız:

gifshot.createGIF({
        'images': [
            { src:'http://i.imgur.com/2OO33vX.jpg', text:'First image text' },
            { src:'http://i.imgur.com/qOwVaSN.png', text:'Second image text' },
            { src:'http://i.imgur.com/Vo5mFZJ.gif', text:'Third image text' }
        ],
        'progressCallback': function(captureProgress) {
            captureProgress=Number(captureProgress)*100
            console.log(captureProgress.toFixed(2)+'%');
        },
    },function(obj) {
        if(!obj.error) {
            var image = obj.image,
                animatedImage = document.createElement('img');
            animatedImage.src = image;
            document.body.appendChild(animatedImage);
        }
    });

Burada tek fark images anahtarını kullanmış olmamız. Dilerseniz diğer anahtarları da burada kullanabilirsiniz. Mesela gifWidth,gifHeight, numFrames ve s. Bu kodu çalıştırdığınızda sonuç aşağıdaki gibi olacaktır:

Son olarak belki de en çok kullanacağınız webcam ile kendi görüntünüzü nasıl kullanacağınızı göstermek istiyorum. Bunun için de aşağıdaki kod parçacığını kullanacağız:

gifshot.createGIF({
        'numFrames': 10,
        'text':'www.anarsamadov.net',
        'gifWidth': 400,
        'gifHeight': 400,
        'progressCallback': function(captureProgress) {
            captureProgress=Number(captureProgress)*100
            console.log(captureProgress.toFixed(2)+'%');
        },
    },function(obj) {
        if(!obj.error) {
            var image = obj.image,
                animatedImage = document.createElement('img');
            animatedImage.src = image;
            document.body.appendChild(animatedImage);
        }
    });

Gördüğünüz gibi burada da çok ciddi bir fark yok. Aynı anahtarları burada da kullanabiliyorsunuz. Sadece burada video ve images anahtarını kullanmadık. Fakat bu kodun çalışması için tarayıcıda kamera kullanımına izin vermeniz gerekiyor. Bu kodu çalıştırdığınızda sonuç aşağıdaki gibi olacaktır:

Şimdilik bu kadar ) Yukarıda paylaştığım eklenti sayfasından dökümantasyonu okursanız daha güzel işler çıkarabilirsiniz.

İyi çalışmalar )