Overlaying images in R Shiny - r

Question

EDIT: solved with magick - thank you guys a lot :) Updated version in the GitHub repo, for anyone who's interested in the story of the reindeer.
I'm quite new to R and just got to know R Shiny. Yet, I am trying to do a reindeer generator. Basic principle: Combine different layers of images in order to create your personal reindeer. E.g. switch coat colours with buttons while the outlines still stay in place on top. Ideally, it should look something like this in the end (a preview I sketched with GIMP):
preview of the reindeer generator
I manage to get the images into Shiny and switch between two coats with radio buttons, for a start.
However, I don't have a clue how to display the images at the same time at the very same location so the outlines will be an extra layer on top of the coat.
You can see the issue here:
grey coat selected
brown coat selected
Here is my code. Since the file name is partly generated by the radio button input, I left the paths like that.
library(shiny)
ui <- fluidPage(
titlePanel("R-eindeer"),
sidebarLayout(
sidebarPanel(
radioButtons("check1","coat colour", choices = c("grey","brown"))
),
mainPanel(
imageOutput("reindeer_coat"),
imageOutput("reindeer_outline")
)
)
)
server <- function(input,output){
getImage <- reactive({
list(src = paste0("./coat/reindeer_", input$check1, ".png"),
width = 500,
height = 500)
})
output$reindeer_coat <- renderImage({
getImage()
}, deleteFile = FALSE)
output$reindeer_outline <- renderImage({
return(list(src = "./outlines/reindeer_outline.png",
width = 500,
height = 500,
contentType = 'image/png'))
}, deleteFile = FALSE)
}
shinyApp(ui = ui, server = server)
I would appreciate any help. Even with that issue solved, there's still a long way to go - but maybe I can learn quick enough to get stuff done until Christmas ;-)
PS: You can find all the folders, image layers and additional information in the Git repo I just created. Also, even if you can't solve my question: feel free to use the images and pass on the Christmas spirit. Reindeer content should always be free. Link to GitHub repo

Answer 1

As mentioned in the comments, magick can do this for you! Specifically, image_mosaic will overlay images.
Try this out:
library(shiny)
library(magick)
ui <- fluidPage(
titlePanel("R-eindeer"),
sidebarLayout(
sidebarPanel(
radioButtons("check1","coat colour", choices = c("grey","brown"))
),
mainPanel(
imageOutput("reindeer")
)
)
)
server <- function(input,output){
get_image <- function(type, color) {
image_read(file.path(type, paste0(color, ".png")))
}
output$reindeer <- renderImage({
# load the images
coat <- get_image("coat", paste0("reindeer_", input$check1))
outline <- get_image("outlines", "reindeer_outline")
# make the reindeer: overlay in order
reindeer <- c(coat, outline)
# create a temp file
tmpfile <- reindeer %>%
image_mosaic() %>%
image_flatten() %>%
image_write(tempfile(fileext='jpg'), format = 'jpg')
# render the file
return(list(src = tmpfile,
height = 300,
width = 300,
alt = "Your reindeer",
contentType = "image/jpg"))
}, deleteFile = TRUE)
}
shinyApp(ui = ui, server = server)