หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

Patrick Brosset

Thomas Steiner

EyeDropper API คืออะไร

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

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

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

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

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

เครื่องมือเลือกสีของ Chromium

วิธีใช้ EyeDropper API

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

การรองรับเบราว์เซอร์

แหล่งที่มา

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

ก่อนอื่น โปรดตรวจสอบว่า 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 คือระบบจะไม่สามารถดึงข้อมูลพิกเซลได้อีกครั้งหากผู้ใช้ไม่ได้ตั้งใจ Promise ที่ 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