Crop - ส่วนขยาย Chrome สำหรับเลือกและจับภาพองค์ประกอบบนเว็บเพจได้อย่างแม่นยำ
(chromewebstore.google.com)สวัสดีครับ ขอแนะนำ Crop ส่วนขยาย Chrome สำหรับจับภาพเฉพาะส่วนที่ต้องการบนเว็บเพจได้อย่างแม่นยำ
Crop เป็นเครื่องมือที่แสดงโอเวอร์เลย์ทับบนหน้าที่กำลังดูอยู่ ทำให้สามารถชี้เมาส์เพื่อเลือกองค์ประกอบ DOM หรือจะลากเลือกพื้นที่เองก็ได้ แล้วคัดลอก/บันทึกเป็น PNG ได้
ผมรู้สึกว่าขั้นตอนการเลือกองค์ประกอบอย่างแม่นยำในฟังก์ชันแคปหน้าจอของ Firefox ใช้งานได้สะดวกมาก จึงเริ่มทำขึ้นมาเพราะอยากใช้แนวทางคล้ายกันบน Chrome ด้วย
ฟีเจอร์หลัก
- ไฮไลต์องค์ประกอบ DOM เมื่อ hover ด้วยเมาส์
- คลิกเพื่อเลือกองค์ประกอบ
- ลากเพื่อเลือกพื้นที่แบบกำหนดเอง
- ย้ายและปรับขนาดพื้นที่ที่เลือก
- จับภาพ viewport ปัจจุบัน
- จับภาพทั้งหน้า
- จับภาพพื้นที่ที่เลือกซึ่งต่อเนื่องออกไปนอก viewport แบบเลื่อนหน้าจอ
- คัดลอก PNG ไปยังคลิปบอร์ดหรือบันทึกเป็นไฟล์
สิทธิ์การเข้าถึงและความเป็นส่วนตัว
เนื่องจากเป็นส่วนขยายเบราว์เซอร์ เรื่องสิทธิ์การเข้าถึงอาจเป็นสิ่งที่หลายคนกังวล ผมจึงพยายามลดส่วนนี้ให้มากที่สุด
สิทธิ์ที่ใช้อยู่ตอนนี้มีประมาณดังนี้
- activeTab: เข้าถึงได้ชั่วคราวเฉพาะแท็บปัจจุบันที่ผู้ใช้เรียกใช้ส่วนขยาย
- scripting: ฉีดสคริปต์โอเวอร์เลย์เข้าไปในแท็บปัจจุบัน
- clipboardWrite: คัดลอก PNG ที่สร้างไปยังคลิปบอร์ด
- downloads: บันทึก PNG ที่สร้าง
ไม่ได้ขอสิทธิ์แบบกว้างอย่าง debugger, <all_urls>
ภาพหน้าจอจะถูกประมวลผลภายในเบราว์เซอร์แบบโลคัล ไม่ได้อัปโหลดภาพหน้าจอหรือข้อมูลหน้าเว็บไปยังเซิร์ฟเวอร์ และไม่ได้ใส่ telemetry ไว้ด้วย รูปภาพจะออกไปยังคลิปบอร์ดหรือไฟล์ดาวน์โหลดก็ต่อเมื่อผู้ใช้กด Copy หรือ Save เท่านั้น
ข้อจำกัดในปัจจุบัน
เนื่องจากข้อจำกัดของส่วนขยาย Chrome จึงมีข้อจำกัดในกรณีต่อไปนี้
- ไม่สามารถทำงานบนหน้าที่ถูกจำกัด เช่น
chrome://หรือ Chrome Web Store ได้ - ภายใน cross-origin iframe ไม่สามารถตรวจสอบจาก content script ได้ จึงมีข้อจำกัดในการเลือกองค์ประกอบ
- ไม่สามารถเข้าถึงภายใน closed shadow DOM ได้เช่นกัน
- การจับภาพทั้งหน้าปัจจุบันทำงานโดยอิงจาก top-level document
- หน้าเว็บที่มีขนาดใหญ่มากอาจทำให้ PNG ถูก downscale เนื่องจากข้อจำกัดของ browser canvas
- บนหน้าที่มี lazy loading, animation, sticky header/footer จำนวนมาก ผลลัพธ์การ stitch ภาพทั้งหน้าอาจไม่สมบูรณ์
เกี่ยวกับการพัฒนา
สร้างขึ้นบนพื้นฐานของ Chrome Manifest V3
มีการฉีด content script ลงบนหน้าเว็บ และจัดการขั้นตอนเลือก/ปรับขนาด/จับภาพผ่านโอเวอร์เลย์ที่ทำงานบน Shadow DOM ส่วนการจับภาพทั้งหน้าหรือพื้นที่นอก viewport ใช้การผสาน chrome.tabs.captureVisibleTab() เข้ากับการเลื่อนหน้าจอเพื่อ stitch ภาพ
โค้ดบางส่วนที่อ้างอิง/นำมาปรับใช้จาก Firefox Screenshots ยังคงประกาศ MPL-2.0 ไว้ตามเดิม และโค้ดของโปรเจกต์ที่เขียนขึ้นใหม่ได้จัดเตรียมไว้เพื่อเผยแพร่ภายใต้สัญญาอนุญาต MIT โปรเจกต์นี้ไม่ได้เป็นโครงการที่มีความร่วมมืออย่างเป็นทางการหรือได้รับการรับรองจาก Mozilla/Firefox
ลิงก์
Chrome Web Store:
https://chromewebstore.google.com/detail/crop/…
GitHub:
https://github.com/postmelee/crop
หากคุณเป็นคนที่ต้องจับภาพเว็บเพจบ่อย ๆ เช่น ตอนเขียนเอกสาร รายงานบั๊ก หรือรีวิว UI ลองใช้งานดูได้เลย และหากมีจุดที่ใช้งานไม่สะดวกหรือมีไอเดียในการปรับปรุง ก็จะขอบคุณมากครับ
3 ความคิดเห็น
ติดตั้งเมื่อวานแล้วกำลังลองใช้อยู่ครับ
ปกติผมต้องลากเมาส์กำหนดพื้นที่เองตลอด แต่ด้วยตัวนี้เลยสะดวกขึ้นมากเลยครับ ขอบคุณครับ
ดูเหมือนว่าจะมีข้อผิดพลาดอยู่จุดหนึ่งนิดหน่อยครับ
ทั้งการคัดลอกและการดาวน์โหลด ดูเหมือนว่าจะมีขอบสีขาวที่ไม่จำเป็นติดอยู่ทางด้านขวาของรูปภาพเล็กน้อยครับ
ทดสอบในสภาพแวดล้อม MacOS, Chrome ครับ
สวัสดีครับ ขอบคุณสำหรับการแจ้งเข้ามา ในสภาพแวดล้อม local ของผมที่เป็น macOS + Chrome ตอนนี้ยังไม่สามารถทำให้เกิดอาการขอบสีขาวแบบเดียวกันซ้ำได้ครับ。
อาจเป็นความแตกต่างของสภาพแวดล้อม รบกวนช่วยแชร์เวอร์ชัน macOS/Chrome/crop, ค่า Chrome zoom, อัตราการขยายหน้าจอ, หน้าที่เกิดปัญหา และสกรีนช็อตของภาพผลลัพธ์ได้ไหมครับ? ถ้าสามารถเปรียบเทียบระหว่างพื้นที่ที่เลือกกับภาพผลลัพธ์ได้ จะช่วยในการตรวจหาสาเหตุได้มากครับ
หากเป็นไปได้ รบกวนสร้าง issue ด้วยแบบฟอร์มรายงานบั๊กด้านล่างนี้ครับ ผมได้เตรียมหัวข้อไว้เพื่อให้ตรวจสอบข้อมูลที่จำเป็นได้โดยไม่ตกหล่น
https://github.com/postmelee/crop/issues/new?template=bug_report.yml
จะฝากไว้ผ่านลิงก์นี้ หรือจะให้ข้อมูลเพิ่มเติมในคอมเมนต์นี้ก็ได้ครับ
เมื่อยืนยันปัญหาได้แล้ว ผมจะติดตามแยกเป็น bug issue ต่างหากครับ
ผมได้ส่งรายงานบั๊กไว้ใน GitHub แล้วครับ
หวังว่าจะเป็นประโยชน์ต่อการแก้ไขนะครับ