block by timelyportfolio 53678e14ac03ce1c435f260469802bb5

fun with fabric.js and ggplot2

Full Screen

Built with blockbuilder.org

Look what can be done in a couple of minutes with the power of combination and open source.

example (in case you missed the link above)

library(ggplot2)
library(svglite)
library(rsvg)
library(fabricjsR)
library(htmltools)

# try to make a ggplot
#  get svg with svglite
#  convert svg to png
#  draw on fabric.js canvas
s <- svgstring()
ggplot(data.frame(y=sin(1:10)), aes(x=1:10,y=y)) + geom_smooth()
s()
dev.off()

gg_png <- rsvg_png(charToRaw(s()))
gg_base64 <- sprintf(
  'data:image/png;base64,%s',
  base64enc::base64encode(gg_png)
)

# make sure we have a working base64 png
browsable(
  tags$img(src=gg_base64)
)

browsable(
  attachDependencies(
    tagList(
      tags$canvas(id="c", height="500", width="500"),
      tags$script(sprintf(
"
var canvas = new fabric.Canvas('c');
fabric.Image.fromURL(
  '%s',
  function(oImg){
    oImg.scale(0.5)
    canvas.add(oImg);
  }
)
"       ,
        gg_base64
      ))
    ),
    htmlwidgets:::widget_dependencies("fabric","fabricjsR")[[2]]
  )
)