How to obtain/get copied image from clipboard data in browser

JS code works well for Chrome, Firefox and Safari

    const source = document.querySelector('.source');
    source.addEventListener('paste', (event) => {
        if (event.clipboardData && 
            event.clipboardData.items && 
            event.clipboardData.items.length == 1) {
                const item = event.clipboardData.items[0];
                if (item.kind == 'file' && item.type == 'image/png') {
                        let blob = item.getAsFile();
                        let f = new FileReader();
                        f.onload = (e) => {
                                console.log(e.target.result);
                        }
                        f.readAsDataURL(blob);
                }
        }
        event.preventDefault();
    });

Image source to data base64 url from clipboard data

❤️ Support This Blog

---

If this post helped you, you can support my writing with a small donation. Thank you for reading.

---

Coffee ☕ Thanks 🙏 Extra Support ❤️