รูปนี้สีอะไร ขโมยสีรูปมาใช้แบบสุด Cool ด้วย Color-Thief

บทความนี้ผมมาแนะนำนางแบบเอ้ย javascript library ที่น่าสนใจอีกหนึ่งตัว ชื่อ Color-Thief ซึ่งช่วยให้เราขโมยสีของรูปมาใช้ได้ เริ่มสงสัยแล้วใช่มั้ยครับ ว่าเอ๊ะ! แล้วมันขโมยสียังไง แล้วทำไมเราต้องขโมยสีด้วย งั้นมาดูรายละเอียดกันเลยดีกว่า

การขโมยสีของ Color-Thief

Color Thief ใช้อัลกอริทึมจำพวก image-processing เพื่อวิเคราะห์และสกัดสีออกมาจากรูป โดยผลลัพธ์ที่ได้คือค่าสี rgb ซึ่งการสกัดสีมี 2 รูปแบบ คือ

  • Dominant color คือ สีหลักหรือสีส่วนใหญ่ของรูป
  • Palette คือ สีที่ใช้ในรูปนี้มีสีอะไรบ้าง สามารถนำมาแสดงเป็นกลุ่มสีได้ (palette แปลว่า จานสี)

การประยุกต์ใช้ในชีวิตจริง

มาถึงตรงนี้หลายคนอาจสงสัยว่า พี่แล้วทำไมผมต้องขโมยสีด้วย ผมแค่มองด้วยตาเปล่าผมก็รู้แล้วว่าภาพนี้มันสีอะไร หรือผมไปดูดสีจาก Photoshop มาใช้ก็จบแล้ว โอเคผมบอกอย่างนี้ ถ้าเว็บคุณมีภาพไม่กี่ภาพคุณใช้วิธีที่ว่ามาได้เลย แต่ลองนึกดูว่าถ้าปริมาณภาพมันเป็นร้อยเป็นพัน คุณจะมานั่งวิเคราะห์สีทีละรูปไหม มันไม่ใช่งานที่น่าสนุกเลย

ในปัจจุบันมีเว็บ โปรแกรมบนคอม และแอพบนมือถือนำหลักการนี้มาใช้หลายตัว เพื่อช่วยให้การแสดงผลดูน่าตื่นเต้นขึ้น ลดความน่าเบื่อ หากใครเคยเข้าเว็บ Dribbble จะเห็นว่าในแต่ละรูปมีการสกัดสีของรูปมาโชว์เป็นกลุ่มสี (Palette) ให้เราดู

รูปนี้สีอะไร ขโมยสีรูปมาใช้แบบสุด Cool ด้วย Color-Thief

โปรแกรม iTunes เองก็มีการโชว์ลิสต์เพลงที่สีพื้นหลังนั้นอิงกับสีปกอัลบั้มของศิลปิน

รูปนี้สีอะไร ขโมยสีรูปมาใช้แบบสุด Cool ด้วย Color-Thief

แม้กระทั้ง Material Design ของ Google ก็ยังมี API Palette เอื้อให้แอพ Android มีการสกัดสีจากรูปหลักมาใช้กับเนื้อหาแอพได้ ทั้งหมดนี้เป็น gimmick เล็ก ๆ น้อย ๆ แต่ช่วยให้ผู้ใช้รู้สึกดีได้ครับ

รูปนี้สีอะไร ขโมยสีรูปมาใช้แบบสุด Cool ด้วย Color-Thief

เริ่มต้นใช้ Color-Thief

เกริ่นมาซะยาว เรามาเริ่มลุย code ใช้งาน Color-Thief กันเลยดีกว่า สิ่งที่คุณจำเป็นต้องมี ก่อนใช้งาน คือ jquery.js, quantize.js และ color-thief.js โดยเจ้า quantize.js เป็น javascript library เกี่ยวกับ การแบ่งนับสี ถ้าใครเข้าใจ HTML DOM, Javascript และ jQuery ดู code ต่อไปนี้จะเข้าใจ เพราะนี่คือ code ทั้งหมดที่ใช้ในการ get ค่าสีของรูปออกมา

<script src="jquery.min.js"></script>
<script src="quantize.js"></script>
<script src="color-thief.js"></script>
<script type="text/javascript">
   var my_image = document.getElementById("id"); //element ของรูปที่ต้องการขโมยสีมาเก็บไว้ใสตัวแปร my_image
   var colorThief = new ColorThief(); //ประกาศ instance colorThief
   var color_dominant = colorThief.getColor(my_image); //เรียกใช้ function getColor เพื่อดึงค่าสี rgb ได้ผลลัพธ์มาเป็น array 1 มิติ
   console.log("Dominant color:"+color_dominant[0]+" "+color_dominant[1]+" "+color_dominant[2]);
   var color_palette = colorThief.getPalette(my_image); //เรียกใช้ function getPalette เพื่อดึงค่าสี rgb ได้ผลลัพธ์มาเป็น array 2 มิติ
   console.log("Palette:"+color_palette[0][1]+" "+color_palette[0][1]+" "+color_palette[0][2]);
</script>

Code ตัวอย่างการใช้งานจริง

ใครที่เป็นมือใหม่ ให้ลองศึกษาทำความเข้าใจตาม code ตัวอย่างที่ผมเขียนได้ครับ

* หมายเหตุ code ตัวอย่างนี้แนะนำให้ run ผ่าน localhost และที่ src ของรูปที่ใช้ให้อิง http://localhost เป็นหลัก ถ้าเอารูปจากเน็ตมาใส่จะมีปัญหาเรื่อง Cross-origin data ซึ่งเป็นเรื่องของ security ตัว web browser พูดง่าย ๆ คือเราไม่มีสิทธฺิ์ไปใช้รูปจากเว็บอื่นมาประมวลผลหาค่าสีที่เครื่องเรา รูปที่ใช้ได้คือรูปบน server เราเองเท่านั้นครับ ส่วนใครยังไม่รู้จัก localhost ย้อนไปศึกษาได้ที่บทความ การติดตั้ง XAMPP สำหรับจำลองเครื่องคอมเราเป็น Web Server

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
    body {
        background-color: #EEE;
    }

    img:hover{
      cursor:pointer;
    }

    #box {
        width: 500px;
        margin: 0 auto;
        padding: 2em 0 2em 0;
        text-align: center;
        background-color: #FFF;
    }

    #color-dominant {
        width: 100px;
        height: 20px;
        margin: 0 auto;
    }

    #color-palette {
        width: 100%;
    }

    .palette{
      display:inline-block;
      width: 50px;
      height: 20px;
    }
    </style>
</head>

<body>
    <div id="box">
        <img id="cover1" src="http://localhost/color_thief/images/cover1.jpg" onmouseover="getColor(this.id);">
        <img id="cover2" src="http://localhost/color_thief/images/cover2.jpg" onmouseover="getColor(this.id);">
        <img id="cover3" src="http://localhost/color_thief/images/cover3.jpg" onmouseover="getColor(this.id);">
        <img id="cover4" src="http://localhost/color_thief/images/cover4.jpg" onmouseover="getColor(this.id);">
        <p><b>Dominant Color</b></p>
        <div id="color-dominant"></div>
        <p><b>Palette</b></p>
        <div id="color-palette"></div>
    </div>
    <script src="jquery.min.js"></script>
    <script src="quantize.js"></script>
    <script src="color-thief.js"></script>
    <script type="text/javascript">

    function getColor(img_id) {
        var my_image = document.getElementById(img_id);
        var colorThief = new ColorThief();
        var color_dominant = colorThief.getColor(my_image);
        var color_palette = colorThief.getPalette(my_image);
        var html_palette='';

        for (var i = 0; i < color_palette.length; i++) {
            html_palette+='<div class="palette" style="background-color: rgb(' + color_palette[i][0] + ',' + color_palette[i][1] + ',' + color_palette[i][2] + ');"></div>';
        }

        $("#color-dominant").css('background-color', 'rgb(' + color_dominant[0] + ', ' + color_dominant[1] + ', ' + color_dominant[2] + ')');
        $("#color-palette").html(html_palette);
    }

    </script>
</body>
</html>

ผลลัพธ์

ใครรัน code ได้หน้าตาประมาณนี้ถือว่าใช้ได้ครับ ลองเอา mouse ไปวางที่รูปเพื่อดูค่าสีที่เปลี่ยนไปแต่ละรูปครับ จากรูปตัวอย่างไม่ต้องบอกก็รู้นะว่าผมเอา mouse ไปวางบนรูปไหน 😀

รูปนี้สีอะไร ขโมยสีรูปมาใช้แบบสุด Cool ด้วย Color-Thief

อธิบายการทำงานของ Code

จะอธิบายเฉพาะ code ส่วน javascript ซึ่งเป็นหัวใจสำคัญของ workshop นี้

<script type="text/javascript">
function getColor(img_id) { //function getColor รับ argument คือ img_id เข้ามา
    var my_image = document.getElementById(img_id); //get element ของรูปอิงจาก img_id
    var colorThief = new ColorThief(); //ประกาศ instance colorThief
    var color_dominant = colorThief.getColor(my_image); //เรียกใช้ function getColor เพื่อดึงค่าสี rgb ได้ผลลัพธ์มาเป็น array 1 มิติ
    var color_palette = colorThief.getPalette(my_image); //เรียกใช้ function getPalette เพื่อดึงค่าสี rgb ได้ผลลัพธ์มาเป็น array 2 มิติ
    var html_palette='';
    //วนลูปเก็บค่าสีแบบ Palette ใส่ตัวแปร html_palette ซึ่งเก็บ div class="palette" สีต่าง ๆ ไว้
    for(var i in color_palette) {
        html_palette+='<div class="palette" style="background-color: rgb(' + color_palette[i][0] + ',' + color_palette[i][1] + ',' + color_palette[i][2] + ');"></div>';
    }
    //แสดงผลค่าสีแบบ Dominant เป็น BG color ของ div id="color-dominant"
    $("#color-dominant").css('background-color', 'rgb(' + color_dominant[0] + ', ' + color_dominant[1] + ', ' + color_dominant[2] + ')');
    //แสดงค่าสีแบบ Palette ให้ div id="color-palette" แสดงผล html_palette
    $("#color-palette").html(html_palette);
}
</script>

ปกติ getPalette จะให้ผลลัพธ์จำนวนสีที่เป็นค่า default อยู่ที่ 9 สี หากใครต้องการมากกว่านั้น ให้ระบุจำนวนสีที่ต้องการลงไปเป็นค่า argument ตัวที่ 2 ต.ย.เช่น อยากได้ 20 สี

var color_palette = colorThief.getPalette(my_image, 20); //จำนวนสีที่อยากได้ คือ 20 สี

สรุป

Color-Thief เป็น javascript library ที่ช่วยให้เราขโมยสีรูปมาใช้งานในรูปแบบค่า rgb ทั้งสีหลัก (Dominant Color) และกลุ่มสี (Palette) เพื่อนำมาใช้กับเนื้อหาในเว็บอีกทีหนึ่ง library ตัวนี้เหมาะกับที่มีเว็บที่นำเสนอรูปเยอะ ๆ อย่างเช่นเว็บแสดงสินค้า รายการอาหาร แกลอรี่ ปกอัลบั้มเพลง ภาพยนตร์ เป็นต้น

สำหรับใครที่ต้องการตัวอย่าง workshop ในบทความนี้สามารถดาวน์โหลดกันได้ที่ Google Drive

ปล. สุดท้ายก็ขึ้นอยู่กับไอเดียแล้วครับว่าจะนำไปประยุกต์ใช้อย่างไร หวังว่าคงได้เห็นนักพัฒนาเว็บสายเลือดไทยนำ library เท่ ๆ อย่าง Color-Thief ไปประยุกต์ใช้ให้เกิดประโยชน์ต่องานตัวเองนะครับ

Comments

comments

RELATED ARTICLESMORE FROM AUTHOR