پشتیبانی از SVG برای Async Clipboard API

تیلور گیونز
Taylore Givens
LinkedIn
توماس اشتاینر

رابط Clipboard API Async Clipboard دسترسی خواندن و نوشتن به محتویات کلیپ بورد سیستم را فراهم می کند. این به یک برنامه وب اجازه می دهد تا ویژگی های برش، کپی و چسباندن را پیاده سازی کند. می‌توانید با فراخوانی متد 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 هنوز وجود دارد، اما پس از چسباندن، حذف می شوند.

برنامه نمایشگر کلیپ بورد در macOS در حال بررسی محتوای کلیپ بورد. نشان می دهد که ویژگی های شنونده رویداد onclick در SVG هنوز وجود دارد.
برنامه نمایشگر کلیپ بورد در macOS در حال بررسی محتوای کلیپ بورد. نشان می دهد که ویژگی های شنونده رویداد onclick در SVG هنوز وجود دارد.

نسخه ی نمایشی

کپی و چسباندن SVGها را در نسخه آزمایشی در Glitch کاوش کنید. کد منبع را مشاهده کنید تا ببینید چگونه کار می کند. حتماً سعی کنید قبل و بعد از کپی و جای‌گذاری روی هر یک از حلقه‌ها کلیک کنید. پس از چسباندن، ویژگی های بالقوه خطرناک کنترل کننده رویداد onclick حذف می شوند.

سپاسگزاریها

پشتیبانی SVG برای Async Clipboard API در Chromium توسط تیم Microsoft Edge پیاده سازی شد. این پست توسط Rachel Andrew و Anupam Snigdha بررسی شده است.