simonw / tools

Assorted tools
https://tools.simonwillison.net
Apache License 2.0
173 stars 19 forks source link

OCR paste support #7

Closed simonw closed 5 months ago

simonw commented 5 months ago

So you can paste in images. Requested here: https://twitter.com/syst__em/status/1774610938777219576

simonw commented 5 months ago

ChatGPT research: https://chat.openai.com/share/bcdcc140-08b4-44cb-9e58-531616a31add

<!DOCTYPE html>
<html>
<head>
    <title>Paste Image Example</title>
</head>
<body>
    <h1>Paste an Image Here</h1>
    <div id="image-container"></div>

    <script>
        document.addEventListener('paste', (event) => {
            const items = (event.clipboardData || event.originalEvent.clipboardData).items;
            for (const item of items) {
                if (item.type.indexOf('image') !== -1) {
                    const blob = item.getAsFile();
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        const imageUrl = event.target.result;
                        const imageElement = document.createElement('img');
                        imageElement.src = imageUrl;
                        document.getElementById('image-container').appendChild(imageElement);
                    };
                    reader.readAsDataURL(blob);
                }
            }
        });
    </script>
</body>
</html>
simonw commented 5 months ago

Here's what I went with: https://github.com/simonw/tools/blob/c4c833564ee3cd784572c994a508f6cc0d2246d9/ocr.html#L313-L319

simonw commented 5 months ago

paste