[Edit]

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

1 contributors

2 contributions

0 discussions

4 points

Created by:

FryerTuck

649

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?:

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),
run below example,
press Paste image bitmap from clipboard button.

Practical example:

xxxxxxxxxx
 
<!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 readFile(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) {
                                readFile(result, callback);
                            })
                            .catch(function(error) {
                                callback(null, error || 'Clipboard reading error.');
                            });
                    })
                    .catch(function(error) {
                        callback(null, error || 'Clipboard reading error.');
                    });
            } else {
                callback(null, 'Clipboard API is not supported.');
            }
        };
    };
​
    // Usage example:
​
    var image = document.querySelector('#image');
​
    function pasteImageBitmap() {
        ClipboardUtils.readImage(function(data, error) {
            if (error) {
                console.error(error);
                return;
            }
            if (data) {
                image.src = data;
                return;
            }
            console.log('Image bitmap is not avaialble - copy it to clipboard.');
        });
    }
   
  </script>
</body>
</html>