I know how to draw rectangles on top of an image in R:
library(png)
library(RCurl)
myurl = 'https://raw.githubusercontent.com/Tixierae/deep_learning_NLP/master/CNN_IMDB/cnn_illustration.png'
my_img = readPNG(getURLContent(myurl))
img_height = dim(my_img)[1]
img_width = dim(my_img)[2]
par(mar=c(0,0,0,0),xaxs='i', yaxs='i')
plot(NA,xlim=c(0,img_width),ylim=c(0,img_height))
rasterImage(my_img,0,0,img_width,img_height)
rect(10,10,100,100,border='green',lwd=5)
I have a Shiny app where the rectangles are drawn by the user on top of the image (brush options of imageOutput). To render the rectangles, what I'm doing currently is that a new image is saved to disk every time a rectangle is added. The image is then rendered with renderImage and imageOutput.
The problem with this approach is that everytime a rectangle is added, the image is modified, thus re-written to disk, and re-rendered. When images are very large, it takes quite some time to write them to disk plus to send them to the user's browser (this is really annoying when the Internet connection is slow).
Is there any way to display the rectangles on top of the image directly in the browser, while the image itself is not modified, and thus not re-written/re-sent to the browser? The only thing I need is that the browser sends back to the server the rectangles coordinates over the plot. I'm looking for something in R, or in JavaScript maybe?