การรองรับ SVG สำหรับ Async Clipboard API

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

อินเทอร์เฟซ Clipboard ของ Async Clipboard API ช่วยให้สิทธิ์เข้าถึงแบบอ่านและเขียนไปยังเนื้อหาของ คลิปบอร์ดของระบบ ซึ่งช่วยให้เว็บแอปพลิเคชันสามารถใช้ฟีเจอร์ตัด คัดลอก และวางได้ คุณวางข้อมูลจากคลิปบอร์ดลงในแอปพลิเคชันได้โดย เรียกใช้เมธอด read() และคัดลอกข้อมูลลงในคลิปบอร์ดได้โดยเรียกใช้เมธอด write() นอกเหนือจากข้อความ รูปภาพในรูปแบบ Portable Network Graphics (PNG), HTML ที่ผ่านการล้างข้อมูลและ HTML ที่ไม่ผ่านการล้างข้อมูล และ รูปแบบที่กำหนดเองสำหรับเว็บแล้ว ตอนนี้ Async Clipboard API ยังรองรับการคัดลอกและวางรูปภาพ SVG ด้วย ซึ่งหมายความว่าในที่สุดคุณก็สามารถโต้ตอบกับซอฟต์แวร์แก้ไขรูปภาพที่จัดการกับ SVG ได้อย่างเป็นธรรมชาติมากขึ้นโดยการคัดลอกและวางรูปภาพ SVG เป็นรูปภาพแทนที่จะเป็นข้อความหรือใช้วิธีแก้ปัญหาที่ซับซ้อน

รองรับ SVG ในการตรวจหาฟีเจอร์

ตรวจหาการรองรับรูปภาพ SVG (และประเภท MIME อื่นๆ) โดยเรียกใช้เมธอด static 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 ที่มีรูปแบบถูกต้อง แล้วเขียนลงในคลิปบอร์ด เมื่อวางข้อมูล ตัวแยกวิเคราะห์เศษจะสร้างส่วน SVG ที่ประมวลผลอย่างเข้มงวด ดังนั้น ก่อนการดำเนินการวาง onclick ตัวแฮนเดิลเหตุการณ์ แอตทริบิวต์จะยังคงอยู่ แต่เมื่อวางแล้ว ระบบจะนำออก

แอปโปรแกรมดูคลิปบอร์ดใน macOS ตรวจสอบเนื้อหาในคลิปบอร์ด ซึ่งแสดงให้เห็นว่าแอตทริบิวต์ตัวแฮนเดิลเหตุการณ์ onclick ใน SVG ยังคงอยู่
แอปโปรแกรมดูคลิปบอร์ดใน macOS ที่ตรวจสอบเนื้อหาคลิปบอร์ด ซึ่งแสดงให้เห็นว่าแอตทริบิวต์ตัวแฮนเดิลเหตุการณ์ onclick ใน SVG ยังคงอยู่

สาธิต

ดูการคัดลอกและวาง SVG ในการสาธิต ดูซอร์สโค้ด เพื่อดูวิธีการทำงาน อย่าลืมลองคลิกวงกลมใดวงกลมหนึ่งก่อนและหลัง การคัดลอกและวาง หลังจากวางแล้ว ระบบจะนำแอตทริบิวต์ตัวแฮนเดิลเหตุการณ์ onclick ที่อาจเป็นอันตรายออก

การรับทราบ

ทีม Microsoft Edge เป็นผู้ติดตั้งใช้งานการรองรับ SVG สำหรับ Async Clipboard API ใน Chromium โพสต์นี้ได้รับการตรวจสอบโดย Rachel Andrew และ Anupam Snigdha