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

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

عرض توضيحي

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

شكر وتقدير

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