การออกแบบทำเสื้อยืดตัวอย่าง(ออนไลน์) อย่างง่ายๆ ด้วย fabric js

ในการทำ Custom T-Shirts หรือการออกแบบลายเสื้อยืดออนไลน์ โดยใช้ fabrice js เป็น javascript canvas library ทำให้สามารถควบคุณ canvas ได้ง่ายมากกว่าแต่ก่อนมาก ทำให้ไม่ยากเหมือนแต่ก่อน มี sourcecode ให้ไปศึกษาครับ

เรามาเริ่มจากตัวอย่างที่เสร็จแล้วกันครับ

1 เริ่มจากการ Include file  fabric.js และ jquery มาเพื่อใช้ใน project

<script src="js/jquery.min.js" type="text/javascript"></script>  
<script src="js/fabric.js" type="text/javascript"></script> 

หลักจากนั้นก็ เริ่ม code ในส่วนแรก สรา้ง instance ของ fabric ขึ้นมาจาก canvas id mainscreen

$( document ).ready(function() {
   
        // สร้าง instance ของ fabric ขึ้นมา ชื่อว่า screen ซึ่งจะต้องใช้ในการวาดหน้าจอใหม่ทุกครั้ง
          var screen = new fabric.Canvas('mainscreen');
              screen.setHeight(360);
              screen.setWidth(600);
      
             /*  code event อื่นที่จะอธิบายในข้อสอง */

});

2 ในส่วนของการทำงานหลักๆ ของแต่ละ event

• การ load ภาพ background ทำการ load ภาพ shirt.png  ( แนะนำว่าเป็น png ครับ) และ config ต่่างๆ เช่น ไม่ให้สามารถ selectable , ขนาด ตำแหน่งของรูป

  fabric.Image.fromURL('image/shirt.png', function(oImg) {
           
             oImg.width = 298;
             oImg.height = 360;
             oImg.set('selectable', false);
             screen.add(oImg);
             screen.centerObject(oImg);
             
                  bg = screen.item(0);
                  
                  bg.filters.length = 0;
                  bg.filters.push(new fabric.Image.filters.Tint({
                  color: 'white',
                  opacity: 0.6
                  }));
                  bg.applyFilters(screen.renderAll.bind(screen));
             
           
             
         });

   

• ดัก event การเลือกสีเสื้อ   เป็นการจับ event เมื่อมีการ click ปุ่ม span ใน class bgcolor ดูตาม comment code ครับ

   $( ".bgcolor span" ).click(function() {
               
                
                  var color = $(this).attr('class');  // ดึงชื่อ class ของ span ที่เลือก
                  
                  bg = screen.item(0); // เลือก object ใน screen(fabric instance) มาไว้ในตัวแปล bg
                  // set Filters เพื่อเปลี่ยนสีรูป                 
                  bg.filters.length = 0;  
                  bg.filters.push(new fabric.Image.filters.Tint({
                  color: color,
                  opacity: .5
                  }));
                  bg.applyFilters(screen.renderAll.bind(screen));
             });

• Event ส่วนของการเพิ่ม ตัวอักษร และ เลือกสี ดูตาม comment ครับ

  $( ".addtxt" ).click(function() {
                        var txt = $(".txt").val();   // รับค่าจาก input class .txt
                        var obtext = new fabric.Text(txt, { fontSize: 20 });    // สร้าง text instance กำหนดขนาด และตัวใส่ text
                        // เซ็ตตำแหน่งและเพิ่ม text instance เข้าไปใน screen    
                        screen.centerObject(obtext);
                        screen.add(obtext);
                        screen.renderAll();
                        
                        
                        $(".txt").val("");    
            
            });

• Event การ upload รูปภาพเข้าไปใน screen ดักจำถ้า user click upload รูปที่ input id imagebroswer

  $( "#imagebroswer" ).change(function() {
  
                    var e = $(this);
                    var reader = new FileReader();
                    reader.onload = function (event){
                                var imgObj = new Image();
                                imgObj.src = event.target.result;
                                imgObj.onload = function () { 
                                var image = new fabric.Image(imgObj);
                                    image.set({
                                         angle: 0,
                                        
                                   });
                                screen.centerObject(image);
                                screen.add(image);
                                screen.renderAll();
                                  }
                            }
              
              
                reader.readAsDataURL(e[0].files[0]);
  
              });

• Event Delete คือการจัดว่าถ้าลูกค้า กดปุ่ม DELETE แล้วจะทำการลบ Object ใน screen ทิ้ง

   $('body').keyup(function(e){
              if(e.keyCode == 46) {
              var activeObject = screen.getActiveObject();  // ดึง Object ที่ active (ที่ user click)
              
              screen.remove(activeObject);  // remove ออกจาก screen
            }
           });
  

จริงๆแล้วส่วนตัวคิดว่า fabric js นั้นสามารถทำได้อีกมากเรียกได้ว่า สามาถทำ ui แบบ photoshop online ได้เลยทีเดียว

หวังว่าบทความนี้จะเป็นไอเดียให้เพื่อนๆคนทำเว็บไปปรับแต่งใช้ในงานต่อไปครับ

SOURCE CODE