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

Taylore Givens

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 هو القيمة ونوع الكائن الثنائي الكبير (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 هو تنسيق فعّال يسمح مثلاً بالنصوص البرمجية المضمّنة. يمكن أن تظهر فائدة هذا بوضوح أكبر خطيرة عندما يلصق المستخدم محتوى من مصادر غير معروفة، لذلك يشغّل المتصفّح خطوة تعقيم. عند نسخ البيانات، لا يتم تنفيذ واجهة برمجة التطبيقات Async Clipboard API مستند SVG منسّق بشكل جيد ثم يكتبه في الحافظة. فعندما يتم لصق جزء SVG (رسومات موجّهة يمكن تغيير حجمها) بصرامة بواسطة الجزء المحلل اللغوي. لذلك، قبل عملية اللصق، يتّبع معالج حدث onclick السمات موجودة، ولكن عند اللصق، تتم إزالتها.

عرض توضيحي

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

روابط ذات صلة

• برنامج إنتاج يستخدم هذه الميزة:
  • ملف SVG SVG
  • SVGcode
• إدخال ChromeStatus
• نية الشحن
• خطأ Chromium
• موضع معايير WebKit
• موضع معايير Mozilla

شكر وتقدير

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