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

JSCodeGetImageBlobFromClipboardData

Subscribe to Post, Code and Quiet Time.

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe