如何在knitr生成多图时实现自包含式HTML幻灯片展示？

问题描述 #

使用knitr生成大量图表时，希望将图表以幻灯片形式展示（支持分步切换的独立图片），而非堆叠排列。尝试过fig.show='animate'参数，但生成动画速度慢且不符合需求。现有方案仅支持self_contained: no，需要适配self_contained: yes的版本，无需单独保存图片文件，解决自包含文档中内嵌图片的问题。

解决方案 #

核心思路是通过knitr的绘图钩子捕获每张图表的base64编码字符串，直接嵌入HTML中，无需依赖外部图片文件。以下是完整的自包含R Markdown代码：

---
output:
  html_document:
    self_contained: yes
---

```{r setup, include=FALSE}
# 设置绘图钩子，捕获base64格式的图片
plot_list <- list()
knitr::knit_hooks$set(
  plot = function(x, options) {
    # 将图片转换为base64编码
    img_base64 <- base64enc::base64encode(x)
    img_src <- sprintf("data:image/%s;base64,%s", options$dev, img_base64)
    plot_list <<- c(plot_list, img_src)
    # 不输出原始图片
    return("")
  }
)

# 生成所有需要的图表
lapply(names(mtcars)[-1L], function(x) {
  plot(reformulate(x, 'mpg'), mtcars, main = '幻灯片展示')
})

slideshow <- function(img_src, captions = NULL) {
  # 默认标题为变量名
  if (is.null(captions)) {
    captions <- names(mtcars)[-1L]
  }
  captions <- rep_len(captions, length(img_src))
  
  # 生成单张幻灯片HTML
  slide_html <- lapply(seq_along(img_src), function(i) {
    sprintf('
    <div class="mySlides">
      <div class="numbertext">%d / %d</div>
      <img src="%s" style="width: 100%%">
      <div class="text">%s</div>
    </div>
    ', i, length(img_src), img_src[i], captions[i])
  }) |> paste(collapse = "")
  
  # 生成切换点HTML
  dots_html <- lapply(seq_along(img_src), function(i) {
    sprintf('\n<span class="dot" onclick="currentSlide(%d)"></span>', i)
  }) |> paste(collapse = "")
  
  # 拼接完整幻灯片容器
  full_html <- sprintf('
  <div class="slideshow-container">
    %s
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
  <br />
  <div style="text-align: center">
    %s
  </div>
  ', slide_html, dots_html)
  
  structure(full_html, class = 'html')
}

# 生成幻灯片
slideshow(plot_list)

## 关键说明
- **base64内嵌图片**：通过`base64enc::base64encode()`将图片文件转换为base64字符串，直接作为`<img>`标签的`src`属性值，无需外部文件支持。
- **knitr钩子**：自定义`plot`钩子捕获每张生成的图片，收集到列表中供幻灯片函数使用，同时阻止原始图片输出。
- **自兼容**：所有资源（图片、样式、脚本）均内嵌在HTML中，支持`self_contained: yes`参数生成独立文件。

内容的提问来源于stack exchange，提问作者rawr