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

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Clipboard อินเทอร์เฟซของ Async Clipboard API ให้สิทธิ์อ่านและเขียนเนื้อหาของ คลิปบอร์ดของระบบ วิธีนี้จะช่วยให้เว็บแอปพลิเคชันใช้การตัด คัดลอก และ วางฟีเจอร์ คุณสามารถวางข้อมูลจากคลิปบอร์ดลงในแอปพลิเคชันได้โดย การเรียกฟังก์ชัน read() และคัดลอกข้อมูลไปยังคลิปบอร์ดโดยเรียกใช้ write() นอกจาก text รูปภาพในเครือข่ายแบบพกพา รูปแบบกราฟิก (PNG) สะอาดตา และ HTML ที่ไม่เข้ากัน และ รูปแบบที่กำหนดเองบนเว็บ ตอนนี้ Async Clipboard API ยังรองรับการคัดลอกและวางรูปภาพ 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 ที่มีรูปแบบที่ถูกต้อง จากนั้นเขียนไปยังคลิปบอร์ด วันและเวลา วางข้อมูลแล้ว ส่วน SVG ที่ได้รับการประมวลผลอย่างเคร่งครัดนั้นสร้างโดย Fragment โปรแกรมแยกวิเคราะห์ ดังนั้น ก่อนการดำเนินการวาง เครื่องจัดการเหตุการณ์ onclick อยู่ แต่เมื่อวาง แอตทริบิวต์เหล่านั้นจะถูกนำออก

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

สาธิต

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

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

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