Plotly.js: Support PNG download from Edge

[alexcjohnson]

In principle we should be able to support png output from Edge

From @vsabeti via @etpinard :

PNG toImage for MS Edge works if img.crossOrigin is set to 'Anonymous'. The tainted canvas is fixed for the Edge browser (and works with this one change), but apparently will not be fixed for IE11. https://connect.microsoft.com/IE/feedback/details/828416/cavas-todataurl-method-doesnt-work-after-draw-svg-file-to-canvas
It would be great if in a future plotlyjs release, toImage png format is allowed for Edge while still restricting IE11 and below to be svg format only.

Pulled out of #699 as this is the only remaining part of that issue.

[radhikalism]

Here's a first cut for review: https://github.com/arbscht/plotly.js/pull/2

[daattali]

Any plans on supporting PNG on Edge soon or is this not in the high priority list?

[etpinard]

cc @nicolaskruchten

[Sachin-DAI]

Here is code based on angular-plotly but it can also be used here

  this.plotlyService.getPlotly().toImage(plotDiv, { // First converting to svg as IE has this option only for plotly
      format: 'svg', width: dPlotWidth, height: dPlotHeight, filename: plotSaveAsFilename
    }
    ).then(function(encodedUrl) {
      // console.log('svg DataURI :: ', encodedUrl);

      const value = encodedUrl.trim()
        .replace(/background-image:\s{0,}url\(/, ``)
        .replace(/["']{0,}data:image\/svg\+xml,/, ``)
        .replace(/["']\);{0,}$/, ``);
      // console.log('svg DataURI VALUE :: ', value);
      const svg1 = decodeURIComponent(value);
      // console.log(svg1);

      const canvas1 = document.createElement('canvas');
      Canvg(canvas1, svg1, { // Canvg required or else tainted canvas based security error
        renderCallback: function() {
          // (canvas as any).msToBlob(function(blob) {
          //   window.navigator.msSaveBlob(blob, 'TEST.png');
          // });
          const blob = (canvas1 as any).msToBlob();
          window.navigator.msSaveBlob(blob, plotSaveAsFilename + '.png'); // finally coverting to png in IE
        }
      });
    })