JSFiddle - React, Tailwind, and code Playground
HTML
<h2 id="copyh2">Copy Image to Clipboard via Javascript.</h2>
<p>Click on image to copy programatically</p>
<div id="">
<img class="copyable" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Copy Image to Clipboard via Javascript." />
</div>
<div style="clear:both">
</div>
<button id='btnCopy'>
Copy Image
</button>
CSS
div{
}
img{
cursor: pointer;
width:300px;
height:200px;
margin-right:20px;
}
JavaScript
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
const modifyCopy = e => {
var contentType = 'image/png';
var b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
var blob = b64toBlob(b64Data, contentType);
var blobUrl = URL.createObjectURL(blob);
e.clipboardData.setData('image/png',blobUrl);
e.preventDefault();
alert('Image ' + blobUrl+' has been copied to clipboard');
};
document.addEventListener('copy', modifyCopy);
$("#btnCopy").click(function (e) {
$(this).attr("contenteditable", true);
document.execCommand('copy');
});