תמיכה ב-SVG ל-Async Clipboard API

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

בממשק Clipboard של ה-API של הלוח האסינכרוני יש גישת קריאה וכתיבה לתוכן של לוח המערכת. כך אפליקציית אינטרנט יכולה להטמיע תכונות של גזירה, העתקה והדבקה. אפשר להדביק נתונים מהלוח באפליקציה באמצעות קריאה ל-method read(), ולהעתיק את הנתונים ללוח על ידי קריאה לשיטה write(). מלבד טקסט, תמונות בפורמט Portable Network גיאוגרפי (PNG),

תכונה לזיהוי ב-SVG

מזהים תמיכה בתמונות SVG (וכל סוג MIME אחר) על ידי קריאה ל-method 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' במקרה הזה) באמצעות ה-method 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 הוא פורמט חזק שמאפשר, לדוגמה, לסקריפטים מוטמעים. זה עלול להיות מסוכן כאשר המשתמש מדביק תוכן ממקורות לא ידועים, ולכן הדפדפן מבצע שלב ניקיון. כשמעתיקים נתונים, ה-API של הלוח האסינכרוני יוצר מסמך SVG בפורמט תקין ואז כותב אותו בלוח. כשמדביקים נתונים, מנתח המקטעים יוצר מקטע SVG שמעובד רק. לכן, לפני פעולת ההדבקה, מאפייני המטפל באירועים של onclick עדיין נמצאים, אבל לאחר ההדבקה הם מוסרים.

אפליקציית Clipboard Viewer ב-macOS בודקת את התוכן בלוח. הוא מראה שמאפייני ה-event listener מסוג onclick ב-SVG עדיין נמצאים.
האפליקציה 'צפייה בלוח העריכה' ב-macOS בודקת את תוכן הלוח. הוא מראה שמאפייני ה-event listener מסוג onclick ב-SVG עדיין נמצאים.

הדגמה (דמו)

אפשר לנסות להעתיק ולהדביק קובצי SVG ב-demo ב-Glitch. אפשר להציג את קוד המקור כדי לראות איך הוא עובד. הקפידו ללחוץ על אחד מהעיגולים לפני ואחרי ההעתקה וההדבקה. אחרי ההדבקה, מאפייני המטפלים באירועים של onclick שעשויים להיות מסוכנים יוסרו.

אישורים

צוות Microsoft Edge הטמיע תמיכה ב-SVG ב-Async Clipboard API ב-Chromium. הפוסט הזה נבדקה על ידי רייצ'ל אנדרו ואנופם ניגדה.