Hỗ trợ SVG cho API Bảng nhớ tạm không đồng bộ

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Giao diện Clipboard của Async Clipboard API cung cấp quyền đọc và ghi nội dung của bảng nhớ tạm hệ thống. Điều này cho phép một ứng dụng web triển khai các tính năng cắt, sao chép và dán. Bạn có thể dán dữ liệu từ bảng nhớ tạm vào một ứng dụng bằng cách gọi phương thức read() và sao chép dữ liệu vào bảng nhớ tạm bằng cách gọi phương thức write(). Ngoài văn bản, hình ảnh ở định dạng Đồ hoạ mạng di động (PNG), HTML đã được dọn dẹp và HTML chưa được dọn dẹp, cũng như định dạng tuỳ chỉnh trên web, Async Clipboard API hiện cũng hỗ trợ việc sao chép và dán hình ảnh SVG. Điều này có nghĩa là cuối cùng bạn có thể tương tác với phần mềm chỉnh sửa hình ảnh xử lý SVG một cách tự nhiên hơn bằng cách sao chép và dán hình ảnh SVG dưới dạng hình ảnh thay vì dưới dạng văn bản hoặc sử dụng các giải pháp tạm thời.

Tính năng phát hiện hỗ trợ SVG

Phát hiện khả năng hỗ trợ hình ảnh SVG (và mọi loại MIME khác) bằng cách gọi phương thức tĩnh ClipboardItem.supports(), truyền cho phương thức này loại MIME mong muốn.

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

Sao chép hình ảnh SVG

Sao chép hình ảnh SVG bằng cách điền ClipboardItem bằng một đối tượng. Blob có dữ liệu hình ảnh SVG là giá trị và loại của blob (tức là 'image/svg+xml' trong trường hợp này) là khoá của blob.

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);
  }
});

Dán hình ảnh SVG

Để dán hình ảnh SVG, hãy đọc ClipboardItem từ bảng nhớ tạm và lấy loại bạn muốn (tức là 'image/svg+xml' trong trường hợp này) bằng phương thức getType(). Thao tác này sẽ trả về một blob. Sau khi chuyển đổi thành URL blob, bạn có thể chỉ định cho thuộc tính src của một <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;
});

Vệ sinh

SVG là một định dạng mạnh mẽ, chẳng hạn như cho phép các tập lệnh được nhúng. Điều này có thể gây nguy hiểm khi người dùng dán nội dung từ các nguồn không xác định, vì vậy, trình duyệt sẽ chạy một bước dọn dẹp. Khi dữ liệu được sao chép, Async Clipboard API sẽ tạo ra một tài liệu SVG có cấu trúc hợp lý rồi ghi tài liệu đó vào bảng nhớ tạm. Khi dữ liệu được dán, trình phân tích cú pháp mảnh sẽ tạo ra một mảnh SVG được xử lý nghiêm ngặt. Do đó, trước thao tác dán, các thuộc tính trình xử lý sự kiện onclick vẫn còn, nhưng khi dán, chúng sẽ bị xoá.

Ứng dụng Clipboard Viewer (Trình xem bảng nhớ tạm) trên macOS đang kiểm tra nội dung trong bảng nhớ tạm. Điều này cho thấy các thuộc tính trình nghe sự kiện onclick trong SVG vẫn còn.
Ứng dụng Clipboard Viewer (Trình xem bảng nhớ tạm) trên macOS kiểm tra nội dung trong bảng nhớ tạm. Điều này cho thấy các thuộc tính trình nghe sự kiện onclick trong SVG vẫn còn.

Bản minh hoạ

Khám phá cách sao chép và dán SVG trong bản minh hoạ. Xem mã nguồn để biết cách hoạt động. Hãy nhớ thử nhấp vào một trong các vòng tròn trước và sau khi sao chép và dán. Sau khi dán, các thuộc tính trình xử lý sự kiện onclick có khả năng gây nguy hiểm sẽ bị xoá.

Lời cảm ơn

Nhóm Microsoft Edge đã triển khai tính năng hỗ trợ SVG cho Async Clipboard API trong Chromium. Bài đăng này được Rachel Andrew và Anupam Snigdha xem xét.