Languages
[Edit]
EN

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

1 points
Created by:
AnnLen
9180

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>

 

Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join