การรองรับ 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

ตรวจหาการรองรับรูปภาพ 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 เหตุการณ์ของ &quot;คลิก&quot; ใน SVG ยังอยู่
แอปเครื่องมือดูคลิปบอร์ดใน macOS กำลังตรวจสอบเนื้อหาในคลิปบอร์ด ซึ่งแสดงว่าแอตทริบิวต์ Listener เหตุการณ์ของ "คลิก" ใน SVG นั้นยังคงอยู่

ข้อมูลประชากร

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

กิตติกรรมประกาศ

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