הממשק 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
עדיין נמצאים, אבל אחרי ההדבקה הם יוסרו.
הדגמה (דמו)
בהדגמה ב-Glitch מוסבר איך מעתיקים ומדביקים קובצי SVG. אפשר לעיין בקוד המקור כדי לראות איך הוא פועל. חשוב לנסות ללחוץ על אחד מהעיגולים לפני ואחרי ההעתקה וההדבקה. אחרי ההדבקה, מאפייני הטיפול באירועים מסוג onclick
שעלולים להיות מסוכנים יוסרו.
קישורים רלוונטיים
- תוכנות ייצור שמשתמשות בתכונה הזו:
- הרשומה ב-ChromeStatus
- כוונה לשלוח
- באג ב-Chromium
- העמדה של WebKit בנושא סטנדרטים
- העמדה של Mozilla בנושא תקנים
תודות
תמיכת SVG ב-Async Clipboard API ב-Chromium הופעלה על ידי צוות Microsoft Edge. הפוסט הזה נבדק על ידי Rachel Andrew ו-Anupam Snigdha.