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

Taylore Givens

Thomas Steiner

Giao diện Clipboard của API Bảng nhớ tạm không đồng bộ cung cấp quyền đọc và ghi vào nội dung của bảng nhớ tạm của hệ thống. Tính năng 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 chưa được dọn dẹp và định dạng tuỳ chỉnh trên web, API Bảng nhớ tạm không đồng bộ hiện cũng hỗ trợ sao chép và dán hình ảnh SVG, 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 bằng cách sao chép và dán hình ảnh SVG dưới dạng hình ảnh thay vì sử dụng văn bản một cách tự nhiê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 bằng cách điền một đối tượng vào ClipboardItem. 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àm khoá.

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 lại ClipboardItem từ bảng nhớ tạm và lấy loại mong 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 mà sau khi được chuyển đổi thành URL của blob, bạn có thể gán cho thuộc tính src của <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;
});

Thanh lọc

SVG là một định dạng mạnh mẽ cho phép các tập lệnh 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 bước dọn dẹp. Khi dữ liệu được sao chép, API Bảng nhớ tạm không đồng bộ sẽ tạo ra tài liệu SVG có định dạng phù hợp rồi ghi tài liệu đó vào bảng nhớ tạm. Khi bạn dán dữ liệu, 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, thuộc tính trình xử lý sự kiện onclick vẫn còn đó nhưng khi bạn dán, các thuộc tính này sẽ bị xoá.

Bản minh hoạ

Khám phá cách sao chép và dán SVG trong bản minh hoạ trên Glitch. Hãy xem mã nguồn để biết cách hoạt động. Hãy chắc chắn thử nhấp vào bất kỳ hình tròn nào 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ó thể nguy hiểm sẽ bị xoá.

Đường liên kết có liên quan

• Phần mềm chính thức sử dụng tính năng này:
  • SVG Boxy (Đồ hoạ vectơ có thể mở rộng)
  • SVGcode
• Mục ChromeStatus
• Ý định gửi hàng
• Lỗi Chromium
• Vị trí Tiêu chuẩn WebKit
• Vị trí Tiêu chuẩn của Mozilla

Xác nhận

Nhóm Microsoft Edge đã triển khai dịch vụ hỗ trợ SVG cho API Bảng nhớ tạm không đồng bộ trong Chromium. Bài đăng này được Rachel Andrew và Anupam Snigdha xem xét.