Languages
[Edit]
EN

JavaScript - read image from clipboard as Data URLs encoded with Base64

1 points
Created by:
AnnLen
1771

In this short article we will see how in JavaScript read image from clipboard as Data URLs encoded with Base64.

Very important thing is: this feature is available in the newest browsers but it can be treated as additional feature that helps user working ergonomics.

How to use it?:

  1. copy some bitmap to clipboard
    (it is good to open some image editor and copy selected image area, use some snipping tool or just press Print Screen key),
  2. run below example,
  3. press Paste image bitmap from clipboard button.

Simple example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div>
    <img id="image" style="border: 1px solid silver; width: 320px; height: 240px" />
    <br /><br />
    <button onclick="pasteImageBitmap()">Paste image bitmap 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 == null) {
                            callback(null, null);
                          	return;
                        }
                        promise
                          	.then(function(result) {
                          		loadFile(result, callback);
                            })
                          	.catch(function(error) {
                              	callback(null, 'Reading clipboard error.');
                            });
                    })
                    .catch(function(error) {
                        callback(null, 'Reading clipboard error.');
                    });
            } else {
                callback(null, 'Clipboard is not supported.');
            }
        };
    };

    // Usage example:

    var image = document.querySelector('#image');

    function pasteImageBitmap() {
        ClipboardUtils.readImage(function(data, error) {
            if (error) {
                console.log(error);
                return;
            }
            if (data) {
                image.src = data;
                return;
            }
            console.log('Image bitmap is not avaialble - copy it to clipboard.');
        });
    }
   
  </script>
</body>
</html>

 

Checkout latest findings & news:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Rockstar community members
Thank you for great work 👍