Giao diện Clipboard của Async Clipboard API cung cấp quyền đọc và ghi vào nội dung của bảng nhớ tạm hệ thống. Điều này cho phép ứ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 đã dọn dẹp và chưa dọn dẹp và các định dạng tuỳ chỉnh trên web, giờ đây, API Bảng nhớ tạm không đồng bộ cũng hỗ trợ 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ì văn bản hoặc sử dụng các giải pháp thay thế không chính thống.
Hỗ trợ tính năng phát hiện 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 ClipboardItem.supports() tĩnh, truyền vào đó 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 đối tượng vào ClipboardItem. Blob chứa 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 lại ClipboardItem từ bảng nhớ tạm và lấy loại hình ảnh mong muốn (trong trường hợp này là 'image/svg+xml') 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 blob đó 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ẽ, chẳng hạn như 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 một bước dọn dẹp. Khi dữ liệu được sao chép, Async Clipboard API sẽ tạo một tài liệu SVG được định dạng đúng cách, sau đó 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 một mảnh SVG được xử lý nghiêm ngặt. Do đó, trước khi thực hiện 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, 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. Xem mã nguồn để biết cách hoạt động. Hãy nhớ thử nhấp vào bất kỳ vòng 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 phát hành chính thức sử dụng tính năng này:
- Mục ChromeStatus
- Ý định vận chuyển
- Lỗi Chromium
- Vị trí của các tiêu chuẩn WebKit
- Quan điểm của Mozilla về các tiêu chuẩn
Lời cảm ơn
Nhóm Microsoft Edge đã triển khai tính năng 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.