Saving image from chart using JS issue

139 Views Asked by Murtuza Z At 19 April 2025 at 09:17

I am using Flotr2 library to renders charts & graphs on webpage page.

The issue I am facing is that downloading chart as Image option is not working on latest chrome browser, I tried to debug the issue and found that below given code which is part of Flotr2 is not working.

Live Demo: Link (Open above link in latest chrome browser & try to click on 'download' buton)

Flotr.addPlugin('download', {

  saveImage: function (type, width, height, replaceCanvas) {
    var
      grid = this.options.grid,
      image;

    if (Flotr.isIE && Flotr.isIE < 9) {
      image = '<html><body>'+this.canvas.firstChild.innerHTML+'</body></html>';
      return window.open().document.write(image);
    }

    if (type !== 'jpeg' && type !== 'png') return;

    image = getImage(
      type, this.canvas, this.ctx,
      this.canvasWidth, this.canvasHeight,
      grid && grid.backgroundColor || '#ffffff'
    );

    if (_.isElement(image) && replaceCanvas) {
      this.download.restoreCanvas();
      D.hide(this.canvas);
      D.hide(this.overlay);
      D.setStyles({position: 'absolute'});
      D.insert(this.el, image);
      this.saveImageElement = image;
    } else {
      var u = navigator.userAgent, isIE = (Flotr.isIE || (new RegExp(/(trident).+rv[:\s]([\w\.]+).+like\sgecko/i)).test(u) || (new RegExp(/(edge)\/((\d+)?[\w\.]+)/i)).test(u));

      if (isIE) {
          return window.open('about:blank').document.body.innerHTML = '<img src="' + image.src+ '">';
      }

      return window.open(image.src);
    }
  },

Here,

window.open(image.src)

Opens new tab window in Chrome v.61 but does not display any image in it, it is blank page.

Note: The same functionality is working on latest Firefox v.56

Please suggest.

Original Q&A

There are 1 best solutions below

subject42 On 12 October 2017 at 11:25

Why not using some kind of preview.html file that you can open first and then calling a js-function in that page (giving it the src attribute as parameter) to insert the image on the page?

Like this:

preview.html:

<!doctype html>

<head>
<script>
function insertImage(dataurl)
{
    document.getElementById("previewImage").src = dataurl;
}
</script>
</head>
<body>
    <img id="previewImage" alt="awesome chart" />
</body>

</html>

Call:

var win = window.open("preview.html");
win.insertImage(image.src);

Saving image from chart using JS issue

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in BROWSER

Related Questions in FLOTR2

Trending Questions

Popular # Hahtags

Popular Questions