I am attempting to utilize the clipboard API to write an image and JSON object to the window clipboard. I am working with Vue and Electron and have successfully written an image and plain text, but I encounter an error when trying to write a JSON object:
Uncaught (in promise) DOMException localhost/:1The code snippet I am using (this.object is a JSON object):
const textBlob = new Blob(['this.object.data','this.object.data2',...], {type: 'text/plain'});
const objBlob = new Blob([JSON.stringify(this.object)], {type: 'application/json'});
// defined a canvas with an image
canvas.toBlob(function(blob) {
const item = new ClipboardItem({
'image/png': blob,
'text/plain': textBlob,
'application/json': objBlob
});
navigator.permissions.query({name: 'clipboard-write'}).then((result) => {
if (result.state === 'granted' || result.state === 'prompt') {
navigator.clipboard.write([item]);
}
}
}, 'image/png');
When including 'application/json': objBlob in the item, it generates an error. It seems that the clipboard does not support JSON objects. This behavior appears to be odd.
Despite this issue, I aim to copy an object to the clipboard alongside an image. Is there a workaround to address this obstacle? Should I consider using an alternative method instead of the clipboard API?
Thank you for your assistance!