Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❀ đŸ’»
We are community of people that helps each other.

If you are beginner in IT field, you are more then welcome to ask questions, it will help you to learn faster. We are here to help you.

We are always beginner in something, we just need to remember it along the way.

there are no wrong questions - Ask Question

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

0 contributions
1 points

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>

 

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more