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

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

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

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

Dominant color คือ สีหลักหรือสีส่วนใหญ่ของรูป

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

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

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

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

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

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

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

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





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]);


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

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

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






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;
}









Dominant Color

Palette







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+=' ';
}

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





ผลลัพธ์

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

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

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


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+=' ';
}
//แสดงผลค่าสีแบบ 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);
}


ปกติ 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 ไปประยุกต์ใช้ให้เกิดประโยชน์ต่องานตัวเองนะครับ