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

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

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

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

הדגמה (דמו)

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

תודות

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