Cara modern
Menggunakan Async Clipboard API
Untuk membaca gambar dari papan klip pengguna secara terprogram, yaitu setelah tombol diklik, Anda dapat menggunakan metode read()
dari Async Clipboard API. Jika izin untuk membaca dari papan klip belum diberikan, panggilan ke navigator.clipboard.read()
akan memintanya saat panggilan pertama metode.
const pasteButton = document.querySelector('#paste-button');
pasteButton.addEventListener('click', async () => {
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
const imageTypes = clipboardItem.types.find(type => type.startsWith('image/'))
for (const imageType of imageTypes) {
const blob = await clipboardItem.getType(imageType);
// Do something with the image blob.
}
}
} catch (err) {
console.error(err.name, err.message);
}
});
Cara klasik
Proses peristiwa paste
Cara klasik untuk menempelkan gambar adalah dengan menggunakan Clipboard API (sinkron), yang memberi Anda akses ke kolom clipboardData
di dalam Dokumen: peristiwa paste
. Namun, metode ini memiliki batasan, misalnya karena metode ini sinkron, menempelkan data dalam jumlah besar dapat memblokir halaman.
document.addEventListener('paste', async (e) => {
e.preventDefault();
for (const clipboardItem of e.clipboardData.files) {
if (clipboardItem.type.startsWith('image/')) {
// Do something with the image file.
}
}
});
{i>Progressive enhancement <i}
Untuk browser yang tidak mendukung Async Clipboard API, Anda tidak dapat mengakses papan klip pengguna secara terprogram (misalnya, saat tombol diklik). Dengan demikian, untuk mengakses papan klip pengguna pada peristiwa paste
, Anda dapat menggunakan Async Clipboard API dan kembali ke Clipboard API (sinkron).
Objek ClipboardItem
yang berasal dari navigator.clipboard.read
memiliki kolom types
yang merupakan array, dan objek File
yang berasal dari event.clipboardData.files
memiliki kolom type
yang berupa string. Anda dapat memeriksa secara kondisional setiap kolom type
atau types
untuk gambar di papan klip:
document.addEventListener('paste', async (e) => {
e.preventDefault();
const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;
for (const clipboardItem of clipboardItems) {
let blob;
if (clipboardItem.type?.startsWith('image/')) {
// For files from `e.clipboardData.files`.
blob = clipboardItem
// Do something with the blob.
} else {
// For files from `navigator.clipboard.read()`.
const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
for (const imageType of imageTypes) {
blob = await clipboardItem.getType(imageType);
// Do something with the blob.
}
}
}
});
Bacaan lebih lanjut
- Clipboard API di MDN
- Berhenti memblokir akses papan klip di web.dev
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
/>
<title>How to paste images</title>
</head>
<body>
<h1>How to paste images</h1>
<p>Hit <kbd>⌘</kbd> + <kbd>v</kbd> (for macOS) or <kbd>ctrl</kbd> + <kbd>v</kbd>
(for other operating systems) to paste images anywhere in this page.
</p>
</body>
</html>
:root {
color-scheme: dark light;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}
button {
display: block;
}
document.addEventListener('paste', async (e) => {
e.preventDefault();
const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;
for (const clipboardItem of clipboardItems) {
let blob;
if (clipboardItem.type?.startsWith('image/')) {
// For files from `e.clipboardData.files`.
blob = clipboardItem
// Do something with the blob.
appendImage(blob);
} else {
// For files from `navigator.clipboard.read()`.
const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
for (const imageType of imageTypes) {
blob = await clipboardItem.getType(imageType);
// Do something with the blob.
appendImage(blob);
}
}
}
});
const appendImage = (blob) => {
const img = document.createElement('img');
img.src = URL.createObjectURL(blob);
document.body.append(img);
};