Download PNG not working in RStudio

[etpinard]

Note that plotly.js is already loading locally in RStudio by default and the mode bar toImage button is displayed by default.

Additional information:

• maybe related to the FF bug fixed in Fix Firefox toImage failures #104
• ggviz (default d3.js library in RStudio) has a local download PNG option, so should be possible. Looks like its around here

[timelyportfolio]

In Windows 7 with RStudio 0.99.878, I got the following. Is the major issue the misalignment, or am I getting further than most?

data(economics, package = "ggplot2")
# basic time-series plot
p <- plot_ly(economics, x = date, y = uempmed, type = "scatter", 
             showlegend = FALSE)
p

[etpinard]

@timelyportfolio that looks like a pretty major bug.

@cpsievert any thoughts on ⏫ ?

[timelyportfolio]

The cloned svg looks fine. I ran it through rsvg and alone in the RStudio Viewer, and it renders properly, so something is happening when drawn to the canvas. I'll keep digging. Also, the built-in RStudio Export->Save to Image... works fine.

[timelyportfolio]

Another issue is when there are multiple layers, such as the boxplot example. I get only the legend.

[timelyportfolio]

@etpinard Not sure where to head next, since this definitely appears to be a bug in RStudio Viewer/Webkit (guessing nested SVG). I have isolated the example in the code below and added canvg as an alternate method to draw the same SVG to canvas. The canvg result is correct. Temporarily using canvg might be a viable solution until this is resolved.

library(htmltools)

browsable(tagList(
  tags$head(
    tags$script(src="http://gabelerner.github.io/canvg/rgbcolor.js"),
    tags$script(src="http://gabelerner.github.io/canvg/StackBlur.js"),
    tags$script(src="http://gabelerner.github.io/canvg/canvg.js")
  ),
  HTML(readLines("https://gist.githubusercontent.com/timelyportfolio/448536a1b6a6397995e8/raw/f4f23019098635b97f3d3b343b9b46273aa2b36a/plot_box.svg")),
  tags$h3("plotly/rstudio"),
  tags$canvas(),
  tags$h3("canvg"),
  tags$canvas(height=348,width=631),
  tags$script(
"
function svgToImg(opts) {

var Image = window.Image;
var Blob = window.Blob;

var svg = opts.svg;
var format = opts.format || 'png';
var canvas = document.querySelectorAll('canvas')[0];

var ctx = canvas.getContext('2d');
var img = new Image();
var DOMURL = window.URL || window.webkitURL;
var svgBlob = new Blob([svg], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);

canvas.height = opts.height || 150;
canvas.width = opts.width || 300;


img.onload = function() {
var imgData;

DOMURL.revokeObjectURL(url);
ctx.drawImage(img, 0, 0);
}


img.src = url;
};

svgToImg({width: 631, height: 348,svg: new XMLSerializer().serializeToString(document.querySelectorAll('svg')[0])});

canvg(
  document.querySelectorAll('canvas')[1],
  new XMLSerializer().serializeToString(document.querySelectorAll('svg')[0])
)
"
  )
))

[etpinard]

guessing nested SVG

@timelyportfolio Can you confirm that indeed nested SVG structures can't be serialized in RStudio?

Getting rid of nested SVGs have been our plans for a while. Acrobat doesn't like them either.

[timelyportfolio]

I will try to isolate.

[timelyportfolio]

@etpinard Yes, the nested SVGs appear to be causing the issue. I do not know though if they in general cause a failure or some particular aspect, such as viewBox, causes the problem. Here is the same code from above, but this time I remove the nested SVG and replace with transformed g elements. Both the RStudio Viewer and the canvg PNG are correct.

library(htmltools)

browsable(tagList(
  tags$head(
    tags$script(src="http://gabelerner.github.io/canvg/rgbcolor.js"),
    tags$script(src="http://gabelerner.github.io/canvg/StackBlur.js"),
    tags$script(src="http://gabelerner.github.io/canvg/canvg.js")
  ),
  HTML(readLines("https://gist.githubusercontent.com/timelyportfolio/71185dd83ddac00dc9ae/raw/cf742834cd5fa057ca820224bdb55e0886b43191/plot_box.svg")),
  tags$h3("plotly/rstudio"),
  tags$canvas(),
  tags$h3("canvg"),
  tags$canvas(height=348,width=631),
  tags$script(
"
function svgToImg(opts) {

var Image = window.Image;
var Blob = window.Blob;

var svg = opts.svg;
var format = opts.format || 'png';
var canvas = document.querySelectorAll('canvas')[0];

var ctx = canvas.getContext('2d');
var img = new Image();
var DOMURL = window.URL || window.webkitURL;
var svgBlob = new Blob([svg], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);

canvas.height = opts.height || 150;
canvas.width = opts.width || 300;


img.onload = function() {
var imgData;

DOMURL.revokeObjectURL(url);
ctx.drawImage(img, 0, 0);
}


img.src = url;
};

svgToImg({width: 631, height: 348,svg: new XMLSerializer().serializeToString(document.querySelectorAll('svg')[0])});

canvg(
  document.querySelectorAll('canvas')[1],
  new XMLSerializer().serializeToString(document.querySelectorAll('svg')[0])
)
"
  )
))

[etpinard]

Great. Good to know. One more reason for getting rid of nested <svg> (cc @alexcjohnson )

[cpsievert]

@timelyportfolio was the result in this comment generated with toImage()? Or is that the HTML result?

[timelyportfolio]

That bad economics line chart image screenshot was generated with toImage(). The HTML looked as expected.

[etpinard]

Looks like PR #415 closed this issue as per #415 (comment).

I'll close this issue for now, but we should try more cases (e.g. gl3d and gl2d graphs) to be sure.