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

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

Patrick Brosset
Patrick Brosset
X GitHub
Thomas Steiner

EyeDropper API คืออะไร

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

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

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

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

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

ตัวเลือกสี Chromium

วิธีใช้ EyeDropper API

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

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

  • 95
  • 95
  • x
  • x

แหล่งที่มา

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

ก่อนอื่นให้ตรวจสอบว่า API พร้อมใช้งานก่อนใช้งาน

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

EyeDropper API รองรับในเบราว์เซอร์ที่ใช้ Chromium เช่น Edge หรือ Chrome ตั้งแต่เวอร์ชัน 95

การใช้ API

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

const eyeDropper = new EyeDropper();

เมธอด open() จะแสดงสัญญาที่แก้ไขแล้วหลังจากผู้ใช้เลือกพิกเซลบนหน้าจอ และค่าที่แก้ไขแล้วจะให้สิทธิ์เข้าถึงสีของพิกเซลในรูปแบบ sRGBHex (#RRGGBB) ระบบจะปฏิเสธคําสัญญาหากผู้ใช้ออกจากโหมดหลอดดูดสีโดยกดปุ่ม 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 ให้เปิดการสาธิต EyeDropper

ลองใช้การสาธิตเกมสีสำหรับอินสแตนซ์ กดปุ่มเล่นและพยายามเลือกสีจากรายการที่ด้านล่างที่ตรงกับสี่เหลี่ยมจัตุรัสสีที่ด้านบน

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

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

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

ในการแก้ไขข้อกังวลนี้ ข้อกำหนดของ API จึงกำหนดให้มีมาตรการต่อไปนี้

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

ความคิดเห็น

ทีม Chromium ต้องการทราบข้อมูลเกี่ยวกับประสบการณ์การใช้งาน EyeDropper API ของคุณ

บอกให้เราทราบเกี่ยวกับการออกแบบ API

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

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

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

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

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

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

ข้อความแสดงการยอมรับ

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