'How can I create a custom JS function to copy plotly image to clipboard in JS without Shiny
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);
}
}
);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
