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

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Chiến lược phát hành đĩa đơn Giao diện Clipboard của API Bảng nhớ tạm không đồng bộ cấp quyền đọc và ghi vào nội dung của bảng nhớ tạm của hệ thống. Thao tác này cho phép ứng dụng web triển khai thao tác cắt, sao chép và dán các tính năng. Bạn có thể dán dữ liệu từ bảng nhớ tạm vào ứng dụng bằng cách đang 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 hàm write(). Ngoài text (văn bản), hình ảnh trong Mạng di động Định dạng đồ hoạ (PNG), được làm sạch và HTML không được dọn dẹp và Định dạng tuỳ chỉnh cho 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. 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 có liên quan đến SVG 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 bằng cách sử dụng các bước đột nhập.

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

Phát hiện tính năng hỗ trợ hình ảnh SVG (và bất kỳ loại MIME nào khác) bằng cách gọi phương thức ClipboardItem.supports() tĩnh, truyền vào đó kiểu 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 vào ClipboardItem với 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à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 kiểu mong muốn (tức là 'image/svg+xml' trong trường hợp này) với 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. Thông tin này có thể là 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 chạy một bước dọn dẹp. Khi dữ liệu được sao chép, API Bảng nhớ tạm không đồng bộ tạo ra tài liệu SVG có định dạng phù hợp rồi ghi vào bảng nhớ tạm. Thời gian dán dữ liệu, thì mảnh SVG được xử lý nghiêm ngặt sẽ được mảnh tạo ra trình phân tích cú pháp. Do đó, trước thao tác dán, trình xử lý sự kiện onclick thuộc tính vẫn còn đó, nhưng khi bạn dán, chúng sẽ bị xoá.

Ứng dụng Trình xem bảng nhớ tạm trên macOS kiểm tra nội dung trong bảng nhớ tạm. Chiến dịch này cho thấy rằng thuộc tính trình nghe sự kiện nhấp trong SVG vẫn ở đó.
Ứng dụng Trình xem bảng nhớ tạm trên macOS kiểm tra nội dung trong bảng nhớ tạm. Chiến dịch này cho thấy rằng thuộc tính trình nghe sự kiện nhấp trong SVG vẫn ở đó.

Bản minh hoạ

Khám phá cách sao chép và dán SVG trong bản minh hoạ trên Glitch. Xem mã nguồn để xem cách hoạt động. Hãy chắc chắn thử nhấp vào vòng kết nối bất kỳ trước và sau sao chép và dán. Sau khi dán, sự kiện onclick có thể nguy hiểm đều bị xoá.

Xác nhận

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