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á.
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á.
Đường liên kết có liên quan
- Phần mềm sản xuất sử dụng tính năng này:
- 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
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.