إمكانية استخدام رسومات موجّهة يمكن تغيير حجمها (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 بكائن. تمثّل النقطة الثنائية الكبيرة التي تتضمّن بيانات صورة 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 متوفرة، ولكن عند اللصق، تتم إزالتها.

تطبيق &quot;عارض الحافظة&quot; على نظام التشغيل macOS يفحص محتوى الحافظة. ويوضّح ذلك أنّ سمات معالج الأحداث onclick في SVG لا تزال متوفّرة.
تطبيق "عارض الحافظة" على نظام التشغيل macOS يفحص محتوى الحافظة. ويوضّح ذلك أنّ سمات معالج الأحداث onclick في SVG لا تزال متوفّرة.

عرض توضيحي

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

الإقرارات

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