Last active
March 10, 2024 03:02
-
-
Save dirask/bac45a6520296faefd494c148d7b9d6b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 👍 ✔ originally posted on: | |
| // https://dirask.com/posts/10Wwaj | |
| // we can run this code online under above link ☘ | |
| // | |
| <!doctype html> | |
| <html> | |
| <body> | |
| <div> | |
| <img id="image" style="border: 1px solid silver; width: 320px; height: 240px" /> | |
| <br /><br /> | |
| <button onclick="pasteImage()">Paste image from clipboard</button> | |
| </div> | |
| <script> | |
| var ClipboardUtils = new function() { | |
| var permissions = { | |
| 'image/bmp': true, | |
| 'image/gif': true, | |
| 'image/png': true, | |
| 'image/jpeg': true, | |
| 'image/tiff': true | |
| }; | |
| function getType(types) { | |
| for (var j = 0; j < types.length; ++j) { | |
| var type = types[j]; | |
| if (permissions[type]) { | |
| return type; | |
| } | |
| } | |
| return null; | |
| } | |
| function getItem(items) { | |
| for (var i = 0; i < items.length; ++i) { | |
| var item = items[i]; | |
| if(item) { | |
| var type = getType(item.types); | |
| if(type) { | |
| return item.getType(type); | |
| } | |
| } | |
| } | |
| return null; | |
| } | |
| function loadFile(file, callback) { | |
| if (window.FileReader) { | |
| var reader = new FileReader(); | |
| reader.onload = function() { | |
| callback(reader.result, null); | |
| }; | |
| reader.onerror = function() { | |
| callback(null, 'Incorrect file.'); | |
| }; | |
| reader.readAsDataURL(file); | |
| } else { | |
| callback(null, 'File api is not supported.'); | |
| } | |
| } | |
| this.readImage = function(callback) { | |
| if (navigator.clipboard) { | |
| var promise = navigator.clipboard.read(); | |
| promise | |
| .then(function(items) { | |
| var promise = getItem(items); | |
| if (promise) { | |
| promise | |
| .then(function(result) { | |
| loadFile(result, callback); | |
| }) | |
| .catch(function(error) { | |
| callback(null, 'Reading clipboard error.'); | |
| }); | |
| } else { | |
| callback(null, null); | |
| } | |
| }) | |
| .catch(function(error) { | |
| callback(null, 'Reading clipboard error.'); | |
| }); | |
| } else { | |
| callback(null, 'Clipboard is not supported.'); | |
| } | |
| }; | |
| }; | |
| // Usage example: | |
| var image = document.querySelector('#image'); | |
| function pasteImage() { | |
| ClipboardUtils.readImage(function(data, error) { | |
| if (error) { | |
| console.log(error); | |
| return; | |
| } | |
| if (data) { | |
| image.src = data; | |
| return; | |
| } | |
| console.log('Image is not avaialble - copy image to clipboard.'); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Thank you very much. Exactly what I needed.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
👍 ✔ Entire articles with source code originally posted on:
https://dirask.com/posts/10Wwaj
We can run this code online under above link ☘