CODEWITHSUNDEEP
imageexporthighchartsclipboard
breq
breq

Reputation: 25516

Highcharts, export/copy image to clipboard

I need to copy highchart to clipboard as image, how i can do that?

Ther's export function build-in but it shows window prompt to open/download but i want to right click on chart (or use 'export' button in right upper corner) and next choose 'copy image to clipboard'.

Need your help once again boys!

Upvotes: 2

Views: 2971

Answers (2)

Christophe Le Besnerais
Christophe Le Besnerais

Reputation: 4713

this should work in modern browser :

function copyToClipboard(chart) {
    const height = 768;
    const width = 1024;
    const image = new Image();
    image.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const context = canvas.getContext('2d');
      context.drawImage(image, 0, 0);
      canvas.toBlob((blob) => navigator.clipboard.write([ new ClipboardItem({ 'image/png': blob }) ]), 'image/png');
    };

    const svg = new Blob([ chart.getSVG({ chart: { height, width } }) ], { type: 'image/svg+xml;charset=utf-8' });
    image.src = URL.createObjectURL(svg);
}

Upvotes: 1

Jugal Thakkar
Jugal Thakkar

Reputation: 13472

To my best knowledge, I don't think you can do it. At least not across browsers, but I think IE allows copying contents to clipboard. In fact, IE9 even allows right clicking the highChart's chart and gives option of "copy" which copies it to the clipboard. IE9 basically allows this on any SVG object. Firefox and Chrome don't allow copying contents to clipboard, not through JS, there are various flash options, but I would suggest staying away unless you absolutely must

Upvotes: 1

Related Questions