การเลือกสีของพิกเซลใดก็ได้บนหน้าจอด้วย EyeDropper API

EyeDropper API ช่วยให้ผู้เขียนใช้หลอดดูดสีที่เบราว์เซอร์จัดหาให้ในการสร้างเครื่องมือเลือกสีที่กำหนดเองได้

Patrick Brosset

Thomas Steiner

EyeDropper API คืออะไร

แอปพลิเคชันครีเอทีฟจำนวนมากอนุญาตให้ผู้ใช้เลือกสีจากส่วนต่างๆ ของหน้าต่างแอป หรือแม้แต่จาก ทั้งหน้าจอ โดยปกติจะใช้การเปรียบเทียบกับหลอดหยด

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

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

องค์ประกอบ <input type="color"> จะอยู่ใกล้กัน ในเบราว์เซอร์ที่ใช้ Chromium ซึ่งทำงานบนอุปกรณ์เดสก์ท็อป จะมี เครื่องมือดูดสีที่เป็นประโยชน์ในเมนูแบบเลื่อนลงของเครื่องมือเลือกสี อย่างไรก็ตาม การใช้ตัวเลือกนี้หมายความว่าแอปของคุณจะต้องปรับแต่ง ด้วย CSS และห่อหุ้มด้วย JavaScript เล็กน้อยเพื่อให้ส่วนอื่นๆ ของแอปเข้าถึงได้ การเลือกตัวเลือกนี้ยังหมายความว่าเบราว์เซอร์อื่นๆ จะไม่มีสิทธิ์เข้าถึงฟีเจอร์นี้

EyeDropper API ช่วยเติมเต็มช่องว่างนี้ด้วยการให้วิธีตัวอย่างสีจากหน้าจอ

ตัวเลือกสีของ Chromium

วิธีใช้ EyeDropper API

การสนับสนุนเบราว์เซอร์

Browser Support

Source

การตรวจหาฟีเจอร์และการรองรับเบราว์เซอร์

ก่อนอื่น โปรดตรวจสอบว่า API พร้อมใช้งานก่อนที่จะใช้

if ('EyeDropper' in window) {
  // The API is available!
}

API หลอดดูดสีรองรับในเบราว์เซอร์ที่ใช้ Chromium เช่น Edge หรือ Chrome ตั้งแต่เวอร์ชัน 95 เป็นต้นไป

การใช้ API

หากต้องการใช้ API ให้สร้างออบเจ็กต์ EyeDropper แล้วเรียกใช้เมธอด open()

const eyeDropper = new EyeDropper();

เมธอด open() จะแสดงผล Promise ที่จะได้รับการแก้ไขหลังจากที่ผู้ใช้เลือกพิกเซลบนหน้าจอ และค่าที่แก้ไขแล้วจะให้สิทธิ์เข้าถึงสีของพิกเซลในรูปแบบ sRGBHex (#RRGGBB) Promise จะถูกปฏิเสธหากผู้ใช้ออกจากโหมดหลอดดูดสีโดยกดปุ่ม esc

try {
  const result = await eyeDropper.open();
  // The user selected a pixel, here is its color:
  const colorHexValue = result.sRGBHex;
} catch (err) {
  // The user escaped the eyedropper mode.
}

นอกจากนี้ โค้ดของแอปยังยกเลิกโหมดหลอดดูดสีได้ด้วย ซึ่งจะมีประโยชน์ในกรณีที่สถานะของแอป มีการเปลี่ยนแปลงอย่างมาก อาจมีกล่องโต้ตอบแบบป๊อปอัปปรากฏขึ้นและต้องมีการป้อนข้อมูลจากผู้ใช้ และควรหยุด โหมดหลอดดูดสีในจุดนั้น

หากต้องการยกเลิกเครื่องมือดูดสี คุณสามารถใช้สัญญาณของออบเจ็กต์ AbortController และ ส่งไปยังเมธอด open()

const abortController = new AbortController();

try {
  const result = await eyeDropper.open({signal: abortController.signal});
  // ...
} catch (err) {
  // ...
}

// And then later, when the eyedropper mode needs to be stopped:
abortController.abort();

เมื่อนำทุกอย่างมารวมกัน คุณจะเห็นฟังก์ชันแบบอะซิงโครนัสที่นำกลับมาใช้ใหม่ได้ด้านล่าง

async function sampleColorFromScreen(abortController) {
  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open({signal: abortController.signal});
    return result.sRGBHex;
  } catch (e) {
    return null;
  }
}

ลองใช้งาน

ใช้ Microsoft Edge หรือ Google Chrome 95 ขึ้นไปใน Windows หรือ Mac แล้วเปิดการสาธิตหลอดดูดสีอย่างใดอย่างหนึ่ง

เช่น ลองใช้เดโมเกมสี กดปุ่มเล่น แล้วพยายามเลือกสีจากรายการที่ด้านล่างให้ตรงกับสี่เหลี่ยมสีที่ด้านบนภายในเวลาที่จำกัด

การสาธิตเกมสี

ข้อควรพิจารณาด้านความเป็นส่วนตัวและความปลอดภัย

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

ข้อกำหนด API กำหนดให้ใช้มาตรการต่อไปนี้เพื่อแก้ไขข้อกังวลนี้

ประการแรก API จะไม่ยอมให้โหมดหลอดดูดสีเริ่มทำงานโดยไม่มีความตั้งใจของผู้ใช้ open() เมธอด จะเรียกได้ก็ต่อเมื่อเป็นการตอบสนองต่อการกระทำของผู้ใช้ (เช่น การคลิกปุ่ม) เท่านั้น
ประการที่ 2 จะดึงข้อมูลพิกเซลไม่ได้หากไม่มีความตั้งใจของผู้ใช้อีกครั้ง Promise ที่ open() ส่งคืนจะเปลี่ยนเป็นค่าสีเมื่อตอบสนองต่อการกระทำของผู้ใช้ (การคลิกพิกเซล) เท่านั้น ดังนั้นจึงไม่สามารถใช้เครื่องมือดูดสีในเบื้องหลังโดยที่ผู้ใช้ไม่สังเกตเห็น
เบราว์เซอร์ต้องทำให้โหมดนี้สังเกตได้ง่ายเพื่อช่วยให้ผู้ใช้สังเกตเห็นโหมดหลอดดูดสีได้ง่ายๆ ด้วยเหตุนี้เคอร์เซอร์เมาส์ปกติจึงหายไปหลังจากผ่านไปสักครู่ และอินเทอร์เฟซผู้ใช้เฉพาะจึงปรากฏขึ้นแทน นอกจากนี้ ยังมีระยะเวลาหน่วงระหว่างเวลาที่โหมดหลอดดูดสีเริ่มต้นกับเวลาที่ผู้ใช้ เลือกพิกเซลได้ เพื่อให้มั่นใจว่าผู้ใช้มีเวลาเห็นแว่นขยาย
สุดท้ายนี้ ผู้ใช้สามารถยกเลิกโหมดหลอดดูดสีได้ทุกเมื่อ (โดยกดปุ่ม esc คีย์)

ความคิดเห็น

ทีม Chromium อยากทราบประสบการณ์การใช้งาน EyeDropper API ของคุณ

บอกเราเกี่ยวกับการออกแบบ API

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

รายงานปัญหาเกี่ยวกับการติดตั้งใช้งาน

คุณพบข้อบกพร่องในการใช้งาน Chromium ไหม หรือการติดตั้งใช้งานแตกต่างจากข้อกำหนด รายงานข้อบกพร่องที่ new.crbug.com โปรดใส่รายละเอียดให้มากที่สุดเท่าที่จะเป็นไปได้ วิธีการง่ายๆ ในการทำซ้ำ และป้อน Blink>Forms>Color ในช่องคอมโพเนนต์

แสดงการสนับสนุน API

คุณวางแผนที่จะใช้ EyeDropper API ใช่ไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยให้ทีม Chromium จัดลําดับความสําคัญของฟีเจอร์ได้ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้มีความสําคัญเพียงใด ทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #EyeDropper และบอกให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร

ลิงก์ที่มีประโยชน์

คำขอบคุณ

EyeDropper API ได้รับการระบุและติดตั้งใช้งานโดย Ionel Popescu จากทีม Microsoft Edge โพสต์นี้ ได้รับการตรวจสอบโดย Joe Medley