EN
JavaScript - read image from clipboard as Data URLs encoded with Base64
4
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?:
- 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 clipboardbutton.
Practical 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 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>
Copy this graphic to system clipboard.
