إمكانية استخدام رسومات موجّهة يمكن تغيير حجمها (SVG) لواجهة برمجة تطبيقات Async Clipboard API

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

توفّر واجهة Clipboard في Async Clipboard API إمكانية الوصول للقراءة والكتابة إلى محتوى ملف الحافظة في النظام. يتيح ذلك لتطبيق الويب تنفيذ ميزات القص والنسخ واللصق. يمكنك لصق البيانات من الحافظة في تطبيق من خلال استدعاء الأسلوب read()، ونسخ البيانات إلى الحافظة من خلال استدعاء الأسلوب write(). بالإضافة إلى النصوص و الصور بتنسيق رسومات الشبكة المحمولة (PNG) وHTML المنظَّف وغير المنظَّف و التنسيقات المخصّصة للويب، تتيح واجهة برمجة التطبيقات Async Clipboard API الآن أيضًا نسخ ولصق صور SVG، ما يعني أنّه يمكنك أخيرًا التفاعل مع برامج تعديل الصور التي تتعامل مع ملفات SVG بشكل أكثر طبيعية من خلال نسخ ولصق صور SVG كصور بدلاً من نص أو استخدام حلول بديلة غير تقليدية.

إتاحة ميزة رصد الرسومات الموجّهة التي يمكن تغيير حجمها (SVG)

يمكنك رصد مدى توفّر دعم لصور SVG (وأي نوع آخر من أنواع MIME) من خلال استدعاء الأسلوب staticClipboardItem.supports() وإرسال نوع MIME المطلوب إليه.

const supportsSVG = () => {
  if (
    !('supports' in window.ClipboardItem) ||
    !window.ClipboardItem.supports('image/svg+xml')
  ) {
    return false;
  }
  return true;
};

نسخ صورة SVG

انسخ صورة SVG عن طريق تعبئة العنصر ClipboardItem بعنصر. تكون القيمة هي العنصر الذي يحتوي على بيانات صورة SVG ويكون نوع العنصر (أي '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(). يؤدي ذلك إلى عرض ملفّ نصي بعد تحويله إلى عنوان URL لملفّ نصي، ويمكنك تعيينه لسمة 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 موجودة، ولكن عند اللصق، تتم إزالتها.

تطبيق Clipboard Viewer على نظام التشغيل macOS يفحص محتوى الحافظة يُظهر ذلك أنّ سمات مستمع أحداث onclick في SVG لا تزال متوفّرة.
تطبيق Clipboard Viewer على نظام التشغيل macOS يفحص محتويات الحافظة يُظهر ذلك أنّ سمات مستمع حدث onclick في SVG لا تزال متوفّرة.

عرض توضيحي

استكشِف عملية نسخ ملفات SVG ولصقها في العرض التجريبي على Glitch. يمكنك الاطّلاع على رمز المصدر لمعرفة طريقة عمله. احرص على تجربة النقر على أيّ من الدوائر قبل النسخ واللصق وبعده. بعد اللصق، تتم إزالة سمات onclick event handler التي يُحتمل أن تكون خطيرة.

الشكر والتقدير

نفَّذ فريق Microsoft Edge ميزة دعم SVG لواجهة برمجة التطبيقات Async Clipboard API في Chromium. راجعت راحيل أندرو وأنوبام سنيغدها هذه المشاركة.