I need to copy both text and image in single click. I tried below code. I clicked and pasted only I'm getting "clip_message"
My HTML:
<button id="copy" onclick="writeClipImg()"><strong>Copy</strong></button>
My JS code
async function writeClipImg() {
try {
const imgURL = 'https://luanedcosta.github.io/copy-image-clipboard/static/media/SecondImage.ef100414.png';
const data = await fetch(imgURL);
const blob = await data.blob();
const blob2 = new Blob(['clip_message'], {type: 'text/plain'});
await navigator.clipboard.writeText('swe');
await navigator.clipboard.write([
new ClipboardItem({
'text/plain': blob2,
'image/png': blob
})
]);
console.log('Fetched image copied.');
} catch(err) {
console.error(err.name, err.message);
}
}
Actually I tried in JS. If I have solution in Angular, thats also better. Please help me to copy both in single click. Thanks
You can work around the one ClipboardItem item limitation by using HTML instead.
I haven't tried this in other browsers, but at least in Chrome it works, and I can paste in Word/Teams/Slack without problems.
Note: the snippet below does not work on StackOverflow because of some security restrictions, but you can try it on codepen