ใช้ js ทำ สกรีนแคปเจอร์ หน้าเว็บ และ บันทึกเป็นรูปภาพ

บทความนี้เป็นเทคนิคการทำ สกรีนแคปเจอร์ หน้าเว็บ ด้วย javascript ซึ่ง user สามารถเลือก ตำแหน่งที่ต้องการ แคปเจอร์และบันทึกเป็น รูปภาพได้

ตัวอย่างหลังจากทำเสร็จแล้วครับ

plugin ที่ใช้ในงานนี้จะประกอบด้วย

• jquery
• Bootstrap
• html2canvas  (ใช้สำหรับการแปลง html เป็น cavans)
• imgareaselect (เป็น ui สำรับ crop image )

อธีบายวีธีการทำงาน ในส่วน js ที่สำคัญ

1 หลังจาก user กดปุ่ม screen capture ด่านล่างแล้ว จะใช้คำสั่ง  html2cavans แปลง html ใน div class ชื่อว่า sereen เป็น canvas

2 ทำการแปลง canvas เป็น image และ append เข้าใน div class ชื่อว่า onscreen เพื่อแสองรูปทั้งหมดของหน้าเว็บไซต์

3 เรียกใช้ plugin imgareaselect เพื่อทำให้ user เลือกส่วนที่ต้องการ

4 จับ event onselectend ใน imageselect และนำค่า x,y,width,height ที่ได้ มา crop image ใน canavas และส่งค่าไปให้ปุ่ม save รูปภาพ

$( ".print" ).click(function() {     // evnet click capture icon
             
              function crateimage(img, selection){     // function สำหรับจับ event imageselectend
                  var canvas = document.getElementById('output');
                  var context = canvas.getContext('2d');
                  var imageObj = new Image();
                  var imagename;
                  
                  imageObj.onload = function() {
                     canvas.width = selection.width;
                     canvas.height = selection.height;
                     // สร้าง cavans ขึ้นมาให้มตามขนาดที่ user เลือก
                     context.drawImage(imageObj, selection.x1,selection.y1,selection.width,selection.height,0,0,selection.width,selection.height);
                     var d = new Date();
                     // ส่งค่่ารูปให้กับปุ่มบันทึก
                     $(".saveimg").attr("href",canvas.toDataURL("image/png"));
                     // กำหนดชื่อไฟล์ตอน save ผมใส่ date เขาไปหลายอันจะได้ไม่ซำกัน
                     $(".saveimg").attr("download","captue"+d.getDate()+d.getDate()+d.getFullYear()+d.getHours()+d.getMilliseconds());
                  }    
                
                  imageObj.src = img.src;         
           }
 
           html2canvas($(".screen"), {     // แปลงจาก html เป็น cavans
                 
              onrendered: function(canvas) {
                 
                 var image = new Image();
                 var img = '<img id="image_edit" src="'+canvas.toDataURL("image/png")+'">';  // แปลง cavans เป็น image และสร้าง tag img html มาให้ม
                 var imgselect;
                 
                           $(".onscreen").html(img).promise().done(function(){  // ใส่รูปลงใน div class onscreen
    
    
                           
                               $(".screen").hide();
                               $(".print").hide();
                               $(".onscreen").show();
                               $(".save").show();
                           
                               imgselect = $('#image_edit').imgAreaSelect({    // init imgareaselect 
                                     handles: true,   
                                     instance: true, 
                                     show:true,                     
                                     onSelectEnd: crateimage // จับ event ด้วย function crateimage 
                           });
                           
                           
                           
                           $(".save").click(function() {  // จับ event ปุ่ม save ข้อมูล
                            
                            imgselect.cancelSelection(); // ล้างค่า img AreaSelect
                               $(".print").show();
                               $(".onscreen").hide();
                               $(".screen").show();
                               $(this).hide();
                            }); 
             });
            }
       });
});

ตัวอย่าง SOURCE CODE

ตัวอย่างนี้สามารถใช้ได้ใน browser รุ่นใหม่ๆ ส่วนรุ่นเก่าคงจะไม่สามารถทำได้

หากท่านใดมีข้อสงสัยในตัว code หรือ มีคำถามเกี่ยวกับการทำเว็บ สามารถสอบถามได้ครับ