อินเทอร์เฟซ Clipboard
ของ Async Clipboard API ให้สิทธิ์อ่านและเขียนเนื้อหาของคลิปบอร์ดของระบบ ซึ่งช่วยให้เว็บแอปพลิเคชันใช้ฟีเจอร์ตัด คัดลอก และวางได้ คุณวางข้อมูลจากคลิปบอร์ดลงในแอปพลิเคชันได้โดยเรียกใช้เมธอด read()
แล้วคัดลอกข้อมูลไปยังคลิปบอร์ดโดยเรียกใช้เมธอด write()
นอกเหนือจากข้อความ รูปภาพ ในรูปแบบ Portable Network Graphics (PNG) HTML ที่ไม่ผ่านการตรวจสอบและ HTML ที่ไม่ผ่านการตรวจสอบ รวมถึงรูปแบบที่กำหนดเองบนเว็บแล้ว ตอนนี้ Async Clipboard API ยังรองรับการคัดลอกและวางรูปภาพ SVG ซึ่งหมายความว่าในที่สุดคุณจะโต้ตอบกับซอฟต์แวร์แก้ไขรูปภาพที่จัดการกับ SVG ได้อย่างเป็นธรรมชาติมากขึ้นด้วยการคัดลอกและวางรูปภาพ SVG หรือเป็นรูปภาพ แทนที่จะใช้การคัดลอกและวางรูปภาพ SVG เป็นรูปภาพ
ฟีเจอร์ตรวจหาการรองรับ SVG
ตรวจหาการรองรับรูปภาพ SVG (และ MIME ประเภทอื่นๆ) โดยการเรียกใช้เมธอด ClipboardItem.supports()
แบบคงที่ และส่งต่อประเภท MIME ที่ต้องการ
const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
) {
return false;
}
return true;
};
คัดลอกรูปภาพ SVG
คัดลอกรูปภาพ SVG โดยเพิ่มออบเจ็กต์ใน ClipboardItem
BLOB ที่มีข้อมูลรูปภาพ SVG คือค่าและประเภทของ BLOB (ในกรณีนี้คือ 'image/svg+xml'
) เป็นคีย์
copyButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
}
try {
const blob = await fetch(img.src).then((response) => response.blob());
await navigator.clipboard.write([
new window.ClipboardItem({
[blob.type]: blob,
}),
]);
} catch (err) {
console.error(err.name, err.message);
alert(err.message);
}
});
วางรูปภาพ SVG
หากต้องการวางรูปภาพ SVG ให้อ่าน ClipboardItem
กลับจากคลิปบอร์ด แล้วรับประเภทที่ต้องการ (ในกรณีนี้คือ 'image/svg+xml'
) ด้วยเมธอด getType()
การดำเนินการนี้จะแสดงผล BLOB ที่เมื่อแปลงเป็น URL ของ Blob แล้ว คุณกำหนดให้กับแอตทริบิวต์ src
ของ <img>
ได้
pasteButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
}
const [clipboardItem] = await navigator.clipboard.read();
const svgBlob = await clipboardItem.getType('image/svg+xml');
if (!svgBlob) {
alert('No SVG in the clipboard.');
return;
}
const image = document.createElement('img');
const blobURL = URL.createObjectURL(svgBlob);
image.addEventListener('load', () => {
URL.revokeObjectURL(blobURL);
});
image.src = blobURL;
});
การทำความสะอาด
SVG เป็นรูปแบบที่มีประสิทธิภาพซึ่งสามารถใช้เป็นสคริปต์ที่ฝังได้ เป็นต้น ซึ่งอาจเป็นอันตรายเมื่อผู้ใช้วางเนื้อหาจากแหล่งที่มาที่ไม่รู้จัก ดังนั้นเบราว์เซอร์จึงดำเนินการขั้นตอนทำความสะอาด เมื่อคัดลอกข้อมูลแล้ว Async Clipboard API จะสร้างเอกสาร SVG ที่มีรูปแบบเหมาะสม จากนั้นเขียนไปยังคลิปบอร์ด เมื่อวางข้อมูล โปรแกรมแยกวิเคราะห์ Fragment จะสร้าง Fragment ของ SVG ที่ผ่านการประมวลผลอย่างเข้มงวด ดังนั้น ก่อนการดำเนินการวาง แอตทริบิวต์เครื่องจัดการเหตุการณ์ onclick
จะยังคงอยู่ แต่เมื่อวาง แอตทริบิวต์เหล่านั้นจะถูกนำออก
![แอปเครื่องมือดูคลิปบอร์ดใน macOS กำลังตรวจสอบเนื้อหาในคลิปบอร์ด ซึ่งแสดงให้เห็นว่าแอตทริบิวต์ Listener เหตุการณ์ของ "คลิก" ใน SVG ยังอยู่](https://developer.chrome.com/static/blog/svg-support-for-async-clipboard-api/svgsupportfort--jlkftlu5qa.png?authuser=5&hl=th)
ข้อมูลประชากร
สำรวจการคัดลอกและวาง SVG ในการสาธิตใน Glitch ไปที่
ซอร์สโค้ด
เพื่อดูวิธีการทำงาน ตรวจดูว่าได้ลองคลิกที่วงกลมใดๆ ก่อนและหลังการคัดลอกและวาง หลังจากวางแล้ว ระบบจะนำแอตทริบิวต์แฮนเดิลเหตุการณ์ onclick
ที่อาจเป็นอันตรายออก
ลิงก์ที่เกี่ยวข้อง
- ซอฟต์แวร์เวอร์ชันที่ใช้งานจริงที่ใช้ฟีเจอร์นี้
- รายการ ChromeStatus
- ความตั้งใจที่จะจัดส่ง
- ข้อบกพร่อง Chromium
- ตำแหน่งมาตรฐานของ WebKit
- ตำแหน่งมาตรฐานของ Mozilla
กิตติกรรมประกาศ
ทีม Microsoft Edge รองรับ SVG สำหรับ Async Clipboard API ใน Chromium โพสต์นี้ได้รับการตรวจสอบโดย Rachel Andrew และ Anupam Snigdha