ว่ากันว่ารูปภาพมีค่าหนึ่งพันคำ และในหลาย ๆ คำในภาพเป็นสี สีเป็นส่วนสำคัญในชีวิตของเราและเราไม่สามารถปฏิเสธความสำคัญของมันได้
ในขณะที่ดูภาพเรามักจะพยายามระบุสีของส่วนหนึ่ง เราได้ลองทำทั้งหมดแล้ว แต่ไม่เคยทำในรายละเอียด เมื่อถูกขอให้ระบุสีจากรูปภาพเรามักจะติดป้ายกำกับโดยใช้ชื่อสีที่เฉพาะเจาะจงเช่นแดงน้ำเงินและเขียว อย่างไรก็ตามหากเราถูกขอให้ดึงสีที่โดดเด่นที่สุด 30 สีในภาพที่ดวงตาของเราไม่สามารถตรวจจับหรือระบุได้อย่างง่ายดาย Camalian เป็นข้อมูลเกี่ยวกับเรื่องนี้ ช่วยให้คุณแยกสีจากภาพแล้วเล่นกับภาพเหล่านั้น
บทบาทหน้าที่และความรับผิดชอบของหัวหน้าเจ้าหน้าที่การเงิน
ในบทความนี้เราจะมาดูว่ามีช่องว่างสีอะไรบ้างอัญมณีทับทิม Camalian นำเสนออย่างไรและจะใช้ในการสร้างเครื่องมือค้นหารูปภาพแบบง่ายๆที่ใช้สีเพื่อระบุและแยกแยะได้อย่างไร
พื้นที่สี
ก่อนที่เราจะเริ่มมาทำความเข้าใจแนวคิดพื้นฐานเกี่ยวกับสีกันก่อน ภาพที่แสดงบนหน้าจอของเราแสดงโดยใช้พิกเซลอาร์เรย์สองมิติ แม้ว่าไฟล์ภาพอาจถูกเข้ารหัสด้วยวิธีต่างๆกัน แต่การแสดงภาพหยาบหลังจากคลายการบีบอัดและถอดรหัสข้อมูลจะเหมือนกัน ในการแสดงโดยใช้อาร์เรย์ 2d นี้แต่ละพิกเซลในภาพสีจะมีองค์ประกอบ 3 ส่วน ได้แก่ สีแดงสีเขียวและสีน้ำเงิน แม้ว่ารูปภาพที่พิมพ์บนกระดาษจะเป็นพื้นผิวสองมิติของจุด แต่จุดต่างๆนั้นมักจะมีส่วนผสมของหมึกสี่ส่วน ได้แก่ สีฟ้าสีม่วงแดงสีเหลืองและสีดำ เทคนิคอื่น ๆ ที่ใช้ในการแสดงสีเหล่านี้เรียกว่าช่องว่างสี ช่องว่างสีที่นิยมใช้มากที่สุด ได้แก่ RGB, CMYK, HSL และ HSV CMYK ส่วนใหญ่ใช้ในอุตสาหกรรมการพิมพ์ในขณะที่อื่น ๆ ทั้งหมดใช้ในสื่อดิจิทัล
พื้นที่สี RGB
สื่ออิเล็กทรอนิกส์ทางกายภาพใด ๆ เช่นหน้าจอ CRT, LCD หรือโทรศัพท์ที่ส่งผ่านแสงจะทำให้เกิดสีโดยใช้ส่วนประกอบสามส่วนคือแดงเขียวน้ำเงิน ดวงตาของมนุษย์สามารถตรวจจับสีได้หลายล้านสีโดยการกระตุ้นตัวรับสีสามประเภทในดวงตา คุณสามารถเชื่อมโยงตัวรับเหล่านั้นกับ R, G และ B
ตามหลักการแล้วส่วนประกอบสีแต่ละสีจะถูกเก็บไว้ในไบต์ซึ่งมีค่าอยู่ระหว่าง 0 ถึง 255
HSL และ HSV Color Space
การจัดพื้นที่สี RGB บนลูกบาศก์นั้นค่อนข้างท้าทาย ผลลัพธ์ของการพยายามแสดงบนลูกบาศก์และหรือวงล้อสีไม่ดี ในขณะที่ทำงานกับล้านสีหรือสีแต่ละสีจะไม่สามารถจัดตำแหน่งอย่างถูกต้องบนพื้นที่สี RGB
เพื่อเอาชนะปัญหานี้ในปี 1970 นักวิจัยได้แนะนำช่องว่างสี HSV (Hue, Saturation, Value) และ HSL (Hue, Saturation, Lightness) ช่องว่างสีทั้งสองนี้สามารถจัดตำแหน่งบนวงล้อสีได้อย่างเหมาะสมและทำให้ง่ายต่อการระบุโทนสีต่างๆบนวงล้อสี
อัญมณีทับทิมสำหรับสี
Camalian เป็นเรื่องของสี สิ่งที่ง่ายที่สุดอย่างหนึ่งที่คุณสามารถทำได้กับ Camalian คือการระบุสีแต่ละสีที่ใช้ในภาพ
สมมติว่าเรามีภาพที่มีสีต่างกัน 15 สี
การระบุสีจากแถบสีนั้นง่ายกว่าการระบุสีจากภาพ ยิ่งไปกว่านั้นนี่เป็นภาพที่เรียบง่ายและภาพถ่ายจริงที่ถ่ายมักจะมีความหลากหลายมากกว่าเมื่อพูดถึงจานสี การแยกค่าสีออกจากภาพนั้นต้องใช้โค้ดที่ค่อนข้างยุ่งยากและนั่นคือสิ่งที่ Camalian เข้ามามันทำสิ่งที่ยุ่งยากเหล่านี้ให้คุณเพื่อให้คุณสามารถดึงข้อมูลที่เกี่ยวข้องกับสีออกจากรูปภาพได้อย่างง่ายดาย
เริ่มต้นใช้งาน
หากการแยกสีด้วย Camalian เป็นเรื่องง่ายการติดตั้งก็จะง่ายยิ่งขึ้น คุณสามารถติดตั้งอัญมณีทับทิมได้โดยดำเนินการ:
gem install camalian และในการใช้อัญมณีนี้คุณสามารถกำหนดได้โดยตรงในสคริปต์ Ruby ของคุณ:
require 'camalian' การแยกสี
ในการดึงสีออกจากภาพก่อนอื่นเราต้องโหลดลงในหน่วยความจำและใช้ วิธีการ บนวัตถุรูปภาพ:
image = Camalian::load( File.join( File.dirname(__FILE__), 'colormap.png') ) colors = image.prominent_colors(15) puts colors.map(&:to_hex) ข้อมูลโค้ดนี้จะโหลดรูปภาพชื่อ“ colormap.png” จากไดเร็กทอรีที่มีสคริปต์อยู่และดึงสีที่โดดเด่นที่สุด 15 สีออกมา
หากต้องการเรียกใช้ให้บันทึกไฟล์เป็น“ color_test1.rb” และเรียกใช้ในเชลล์โดย ruby color_test1.rb ควรให้ผลลัพธ์คล้ายกับสิ่งต่อไปนี้:
['#318578', '#41b53f', '#2560a3', '#359169', '#2154b1', '#4dda15', '#1d48bf', '#1530dc', '#296d94', '#193dcd', '#3da94d', '#45c131', '#3da84e', '#2d7986', '#193cce'] และมันง่ายมาก! เราเพิ่งแยก 15 สีที่ใช้ในภาพด้านบน คุณนึกภาพออกไหมว่าลองทำโดยใช้ loopy code หรือแย่กว่านั้นคือใช้สายตาของคุณ มาเรียกเลขหมายกันดีกว่า คราวนี้เราจะลองใช้ Camalian กับภาพที่มีรายละเอียดเพิ่มเติม:
ด้วยการเรียกใช้สคริปต์เดียวกันกับภาพนี้เราจะได้รับสิ่งต่อไปนี้:
[“#210b03”, “#723209”, “#974d09”, “#ae5d08”, “#c77414”, “#d77f15”, “#ffea54”, “#94651f”, “#b66a15”, “#c25f06”, “#fdd94d”, “#d39a39”, “#efa540”, “#fffffe”, “#fff655”] ความพยายามที่จะมองเห็นภาพอาร์เรย์ของค่าสีที่ผลิตข้างต้นทำให้เราได้สิ่งนี้:
จานสีเป็นสิ่งที่ดี แต่ไม่มีรูปแบบเฉพาะในสีที่ดึงออกมา มาจัดเรียงค่าสีตามความคล้ายคลึงกันและดูว่าช่วยได้หรือไม่ สิ่งที่เราต้องทำคือเรียกใช้อีกหนึ่งฟังก์ชันก่อนที่จะพิมพ์อาร์เรย์ไปยังคอนโซล:
colors = image.prominent_colors(15).sort_similar_colors 
แต่ถ้าเราต้องการดึงสีที่ค่อนข้างอ่อนกว่าล่ะ? เราอาจต้องการสีที่มืดเพียง 40% หรืออีกนัยหนึ่งมีค่าความสว่าง (ในพื้นที่สี HSL) ระหว่าง 0 ถึง 40 สิ่งที่เราต้องทำคือ:
หน่วยความจำรั่วในจาวาคืออะไร
colors = image.prominent_colors(15).light_colors(0, 40) 
การสร้าง Image Search Engine
ตอนนี้เรารู้แล้วว่าการจัดการกับสีโดยใช้ Camalian นั้นง่ายแค่ไหนมาสร้างเว็บแอปพลิเคชันง่ายๆที่ช่วยให้คุณสามารถอัปโหลดภาพและจัดทำดัชนีตามสีได้ เพื่อความกระชับเราจะข้ามรายละเอียดต่างๆที่เกี่ยวข้องไป สร้าง Ruby ใบสมัคร แต่เราจะเน้นเฉพาะที่เกี่ยวข้องกับสีและการใช้งาน Camalian
สำหรับขอบเขตของแอปพลิเคชั่น Ruby นี้เราจะ จำกัด เฉพาะการจัดการการอัปโหลดรูปภาพการแยกสีจากรูปภาพก่อนจัดเก็บและค้นหารูปภาพที่อัปโหลดตามสีและเกณฑ์ที่เลือก
ด้านล่างนี้เป็นแผนภาพแบบจำลองเพื่ออธิบายโครงสร้างของแอปพลิเคชันของเรา:
ทุกภาพที่อัปโหลดจะแสดงโดยใช้ออบเจ็กต์ PortfolioItem วัตถุแต่ละสีแสดงถึงสีที่ไม่ซ้ำกันซึ่งค้นพบผ่านภาพที่อัปโหลดและสุดท้าย PortfolioColor แสดงถึงความสัมพันธ์ระหว่างแต่ละภาพและสีที่พบในภาพนั้น
c corp vs s corp คำนิยาม
บิตของแอปพลิเคชันส่วนใหญ่ค่อนข้างเป็นมาตรฐานโดยเฉพาะอย่างยิ่งในเรื่องการจัดการการอัปโหลดรูปภาพการสร้างเอนทิตีแบบจำลองและการคงอยู่ในฐานข้อมูลเป็นต้นในกรณีที่คุณเป็น นักพัฒนา Ruby สิ่งเหล่านี้ไม่ควรเล่นง่ายๆ ด้านล่างนี้เป็นวิธีการที่ใช้ในการดึงสีจากรูปภาพที่อัปโหลด:
after_save :extract_colors private def extract_colors image = Camalian::load(self.image.path) colors = image.prominent_colors(self.color_count.to_i).sort_similar_colors colors.each do |color| unless c = Color.where(r: color.r, g: color.g, b: color.b).first c = Color.create(r: color.r, g: color.g, b: color.b, h: color.h, s: color.s, l: color.l) end self.colors << c end end สิ่งนี้ช่วยได้โดยการแยกจานสีและบันทึกลงในฐานข้อมูล สังเกตว่าเราแยกเฉพาะสีที่โดดเด่นจำนวนหนึ่ง (สิ่งที่ผู้ใช้สามารถกำหนดได้เมื่ออัปโหลดภาพ)
เมื่อผู้ใช้ส่งภาพผ่านแบบฟอร์มบน UI ของเว็บรูปภาพจะได้รับผ่านตัวจัดการโพสต์และใหม่ PortfolioItem ถูกสร้างขึ้นสำหรับมัน วิธีนี้ extract_colors ถูกเรียกใช้เมื่อใดก็ตามที่รายการพอร์ตโฟลิโอยังคงอยู่ในฐานข้อมูล
เพื่อให้สามารถแสดงจานสีบนหน้าได้เราใช้ตัวช่วยง่ายๆ:
module PortfolioItemsHelper def print_color_palette(colors) color_string = '' colors.each do |c| color_string += content_tag :span, ' ', style: 'display: block; float: left; width: 35px; height: 35px; background: #{c.to_hex}' end content_tag :div, color_string.html_safe, style: 'display: inline-block;' end end โดยพื้นฐานแล้วจะสร้างไฟล์ div มีสี่เหลี่ยมเล็ก ๆ ครอบคลุม โดยแต่ละสีจะตั้งค่าสีพื้นหลังเป็นสีเด่นที่แยกออกมา
สุดท้ายในการใช้การค้นหาเราต้องใช้คณิตศาสตร์และตรรกะ:
class PortfolioSearchForm include ActiveModel::Model attr_accessor :color, :similarity validates_presence_of :color, :similarity def color_object @color_object ||= Camalian::Color.new(self.color) end def color_range(color, level) (color_object.send(color) - level)..(color_object.send(color) + level) end def colors_by_rgb level = self.similarity.to_i * 255 / 100.0 Color.where(r: color_range(:r, level), g: color_range(:g, level), b: color_range(:b, level)) end def colors_by_hsl level = self.similarity.to_i Color.where(h: color_range(:h, (self.similarity.to_i * 30 / 100.0) ), s: color_range(:s, level), l: color_range(:l, level)) end end กับ colors_by_hsl วิธีการเราสามารถดึงไฟล์ สี เอนทิตีที่ตรงกับคำค้นหาของเรา และด้วยสิ่งเหล่านี้เราสามารถระบุรูปภาพที่อัปโหลดทั้งหมดและแสดงผลหน้าผลการค้นหาของเรา แบบสอบถามเองค่อนข้างง่าย เมื่อพิจารณาถึงสีที่เฉพาะเจาะจงและค่าความคล้ายคลึงกันช่วงของค่าจะถูกคำนวณสำหรับองค์ประกอบสีแต่ละสี
และนั่นก็เป็นส่วนที่ยากทั้งหมด
ลองใช้งาน
คุณสามารถค้นหารหัสเต็มได้ที่ GitHub . คุณสามารถปรับใช้อินสแตนซ์ของแอพนี้กับ Heroku หรือทดลองใช้ภายในเครื่อง:
git clone https://github.com/nazarhussain/camalian-sample-app.git cd camalian-sample-app bundle install rake db:migrate rails s แอปพลิเคชั่นสุดท้ายมีลักษณะดังนี้:
เมื่อแอปพลิเคชันทำงานให้ชี้เว็บเบราว์เซอร์ของคุณไปที่ http: // localhost: 3000 ใช้แบบฟอร์มบนหน้าจออัปโหลดภาพจานสีต่างๆ จากนั้นหากต้องการค้นหาภาพตามสีให้ใช้ช่องค้นหาที่มุมขวาบน รายการแบบเลื่อนลงขีด จำกัด ช่วยให้คุณระบุค่าเผื่อความแตกต่างสำหรับการจับคู่สีของภาพ
อะไรต่อไป?
แอปพลิเคชั่นสาธิตที่เราสร้างขึ้นในบทความนี้ค่อนข้างเรียบง่าย แต่ความเป็นไปได้นั้นไม่มีที่สิ้นสุด! การใช้งานจริงอื่น ๆ ของไลบรารีนี้อาจรวมถึง:
- การ จำกัด ไม่ให้ผู้ใช้อัพโหลดภาพโปรไฟล์สีเข้ม
- ปรับธีมสีของไซต์ให้เข้ากับรูปภาพที่ผู้ใช้อัปโหลด
- สำหรับการแข่งขันด้านการออกแบบให้ตรวจสอบความถูกต้องตามข้อกำหนดของจานสีโดยอัตโนมัติ
คุณสามารถสำรวจห้องสมุดเพิ่มเติมได้บน GitHub และตรวจสอบซอร์สโค้ด อย่าลังเลที่จะรายงานข้อบกพร่องโดยสร้างปัญหาหรือมีส่วนร่วมโดยส่งคำขอดึง
