โปรแกรมสร้าง Gif Animation จาก vdo บนเว็บด้วย javascript

เนื่องจากมีความสงสัยว่า JavaScript นั้นสามารถ capture vdo และ สามารถสร้างไฟล์ gif animation ได้หรือไม่ จึงไปศึกษาหาข้อมูลมาดู สรุปคือสามารถทำได้ จึงมาลองเขียนเป็นโปรแกรมแบบง่ายๆเพื่อศึกษาและเขียนบทความเก็บไว้เผื่อมีงานทำเว็บที่ต้องใช้ในอนาคต

เรามาดูตัวอย่างกันครับ กดที่นี่เพื่อดูเต็มจอ

จากโปรแกรมเราจะใช้ js library 2 อันคือ

1  jQuery ทำหน้าที่ในการคุม event กัน dom

2 gif.js   (https://github.com/jnordberg/gif.js)  สำหรับสร้าง gif file

ขั้นตอนการทำงานของโปรแกรมนี้มีอยู่ 3 ขั้นตอน (ผมจะแยก code แต่ละขั้นตอนออกจากกัน)

1  ผู้ใช้อัปโหลด vdo

– ส่วน html input file สำหรับผู้ใช้ upload vdo

<input type="file" name="file" class="vdoupload" accept="video/*">  

– ส่วน html แสดงผล vdo หลังจาก upload

<video width="400" controls " id="video">
<source src="mov_bbb.mp4" id="video_show">
Your browser does not support HTML5 video.
</video>

– ส่วน javascript ในการควมคุม event (เมื่อผู้ใช้กดปุ่มและเลือกไฟล์)  จากนั้นนำ ไฟล์ที่เลือกไปแสดงผลใน tag video

$(".vdoupload").change(function (){    // jQuery event on change
  var $source = $('#video_show');       // Select ID video_show 
  $source[0].src = URL.createObjectURL(this.files[0]); // นำไฟล์ที่ upload มาแสดงใน html tag vdo
  $source.parent()[0].load();
  $(".showcap,.showgif").html("");  // ล้างข้อมุลการแสดงผลขั้นตอนที่ 2 กับ 3
});

2  เมื่อผู้ใช้เลื่อน vdo และ กดปุ่ม capture เพื่อสร้างภาพนิ่ง

– ส่วน html ปุ่ม capture

<button class="capture">Capture</button>

– ส่วน html element แสดงผลรูปที่ได้จากการกดปุ่ม capture

– ส่วน javascript ในการควบคุมปุ่ม capture และ นำรูปภาพที่ได้ไปแสดงใน html element class showcap

$(".capture").click(function (){  // จับ event เมื่อปุ่ม capture ถูกกด
     var video = $('video')[0];  // select element video มาเก็บไว้ในตัวแปร
     var ra = 1;     // ตัวแปรสัดสวนในการย่อรูป
     if(video.videoWidth>500){  // ถ้าขนาด vdo มีขนาดกว่ากว่า 500 ให้สัดส่วน 50%  
         ra = .5;        
        }   
     var $ctx = $( '<canvas />', {width:video.videoWidth*ra, height:video.videoHeight*ra} ); // jQuery สร้าง cavans ขึ้นมา
     $ctx[0].getContext('2d').drawImage(video, 0, 0, video.videoWidth*ra, video.videoHeight*ra); // นำรูปจาก vdo ไปใส่ใน cavans
     $(".showcap").append($ctx) // เพิ่ม cavans เข้าไปใน element showcap 
});

3 เมื่อผู้ใช้กดปุ่ม GIF ANIMATION
– html ปุ่ม gif animation

<button class="gengif">GIF ANIMATION</button>

– JavaScript สำหรับปุ่ม gif animation

$(".gengif").click( function (){ // event เมื่อกดปุ่ม
  var gif = new GIF({   // สร้าง object gif ใช้ gif.js
  workers: 2,
  quality: 10
  });
   //  loop canvas (รูปภาพที่ได้จากการ capture)
  $( "canvas" ).each(function( i,val ) {
  gif.addFrame($(this)[0], {copy: true});  // นำรูปภาพที่ได้จากการ capture ใส่ไปใน gif object 
  });
  gif.on('finished', function(blob) {  // callback function หลังจากสร้าง gif เสร็จ

  var urlCreator = window.URL || window.webkitURL;
  var imageUrl =   URL.createObjectURL(blob);  // ไฟล์ gif ที่เสร็จแล้ว
  var video = $('video')[0]; 
  var image = $( '<img />', {width:video.videoWidth*.5, height:video.videoHeight*.5,src:imageUrl} ); // สร้าง html tag image ขี้นมา
  $(".showgif").html(image);  // นำ gif image มาแสดงใน element 
  });
  gif.render();
});

เท่านี้เราก็ได้ไฟล์ gif animation จาก capture vdo ครับ

สามารถ Download ไปศึกษากันได้ครับ