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

Taylore Givens

Thomas Steiner

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

הדגמה (דמו)

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

קישורים רלוונטיים

• תוכנה בסביבת ייצור באמצעות התכונה הזו:
  • פורמט SVG של Box
  • SVGcode
• רשומת ChromeStatus
• הכוונה למשלוח
• באג ב-Chromium
• מיקום ב-WebKit Standards
• מיקום בסטנדרטים של Mozilla

אישורים

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