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

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

הממשק Clipboard של Async Clipboard API מספק גישה לקריאה ולכתיבה לתוכן של הלוח של המערכת. כך אפשר להטמיע באפליקציית אינטרנט תכונות של גזירה, העתקה והדבקה. כדי להדביק נתונים מהלוח לאפליקציה, צריך להפעיל את השיטה read(). כדי להעתיק נתונים ללוח, צריך להפעיל את השיטה write(). בנוסף לטקסט, תמונות בפורמט Portable Network Graphics ‏ (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, שאפשר להקצות למאפיין src של <img> אחרי שממירים אותו לכתובת URL של blob.

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 עדיין נמצאים, אבל אחרי ההדבקה הם יוסרו.

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

הדגמה (דמו)

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

תודות

תמיכת SVG ב-Async Clipboard API ב-Chromium הופעלה על ידי צוות Microsoft Edge. הפוסט הזה נבדק על ידי Rachel Andrew ו-Anupam Snigdha.