I would like to implement a button in a plotly chart that copies the chart in png format to clipboard. I follow this answer to related question here but I found some issues e.g. async await function and also blob() function not resolved. Can anyone give me insight to this issue?
the button looks like this and clickable already
Below is how the code look like right now.
name: 'CopyPNGToClipboard',
title: 'CopyPNGToClipboard',
icon: Plotly.Icons.disk,
click: function (gd) {
Plotly.Snapshot.toImage(gd, { format: "png" }).once( "success", function (url){
try {
debugger;
const data = fetch(url);
const blob = data.blob();
navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob
})
]);
console.log("Image copied.");
} catch (err) {
console.error(err.name, err.message);
}
}
);
}
Edited Version
{
name: 'CopyToClipboard',
title: 'Copy PNG To Clipboard',
icon: Plotly.Icons.disk,
click: function (gd) {
Plotly.Snapshot.toImage(gd, { format: "png" }).once( "success", async function (url){
try {
debugger;
const data = await fetch(url);
const blob = await data.blob();
navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob
})
]);
console.log("Image copied.");
} catch (err) {
console.error(err.name, err.message);
}
}
);
}
}