使用HTML批量拼图

最新推荐文章于 2024-07-16 11:38:34 发布

懒麻蛇

最新推荐文章于 2024-07-16 11:38:34 发布

阅读量1k

点赞数 1

文章标签： html css python java 数据可视化

本文链接：https://blog.csdn.net/lazysnake666/article/details/122404555

版权

几种拼图的方式

1）作图的时候就用subplot或者grid.arrage等软件自带的方式拼图

2）将生成的图片载入PowerPoint或者PS拼图

3）使用HTML拼图

用HTML拼图其实是一种常见的批量拼图方式，特别是一些流水线处理方式中，它成了做summary的最好方式。

比如：fmriprep的报告就是使用html呈现summary，简洁直观

https://fmriprep.org/en/stable/_static/sample_report.html

再比如：Freesurfer做visual QC需要生成很多皮层区域分区的图，使用html拼接起来能提高QC工作效率。

论文作图偶尔也会需要批量拼图，不想用PS手动拼图的话，可以考虑html。这里分享一种简单的拼图方式。

比如分别对两组数据做了1、2、3种分析，

每个分析都有4个结果图

现在使用html快速呈现这些结果。

html样式部分

<style>
* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
/* Create equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 5px;
}


#parent {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: auto;
  width: 100%;
}
#left {
position: relative;
  right: 25%;
  transform: translateX(+50%);
  font-size: 15pt;
  font-weight: bold;
}
#right {
  position: relative;
  left: 25%;
  transform: translateX(+0%);
  font-size: 15pt;
  font-weight: bold;
}


</style>

row和column定义之后载入图片的样式，它相当于一个容器，之后载入图片使用它们的类属性。
#parent #left #right是text的样式，用于调整呈现title的位置。

html的<body>部分

首先对<div>使用之前定义的文字样式，文字的位置在之前的left和right样式中调整即可。

<div id="parent">
        <span id="left">BSL</span>
        <span id="right">FU2</span>
</div>

加入analysis的title

<h3>Analysis 1</h3>

使用row和column类载入analysis1的图片，顺序将结果装到column容器里即可。

<div class="row">
            <div class="column">
              <img src="BSL_analysis1/results1.jpg"  style="width:100%">
            </div>
            <div class="column">
                <img src="BSL_analysis1/results2.jpg"  style="width:100%">
              </div>
              <div class="column">
                <img src="BSL_analysis1/results3.jpg"  style="width:100%">
              </div>
              <div class="column">
                <img src="BSL_analysis1/results4.jpg"  style="width:100%">
              </div>
              <div class="column">
                <img src="FU2_analysis1/results1.jpg"  style="width:100%">
              </div>
              <div class="column">
                <img src="FU2_analysis1/results2.jpg"  style="width:100%">
              </div>
              <div class="column">
                <img src="FU2_analysis1/results3.jpg"  style="width:100%">
              </div>
              <div class="column">
                <img src="FU2_analysis1/results4.jpg"  style="width:100%">
              </div>
          </div>
        </div>

对于analysis2使用同样的操作

<h3>Analysis 2</h3>
        <div class="row">
            <div class="column">
              <img src="BSL_analysis2/results1.jpg"  style="width:100%">
            </div>
            <div class="column">
                <img src="BSL_analysis2/results2.jpg"  style="width:100%">
              </div>
              <div class="column">
                <img src="BSL_analysis2/results3.jpg"  style="width:100%">
              </div>
              <div class="column">
                <img src="BSL_analysis2/results4.jpg"  style="width:100%">
              </div>
              <div class="column">
                <img src="FU2_analysis2/results1.jpg"  style="width:100%">
              </div>
              <div class="column">
                <img src="FU2_analysis2/results2.jpg"  style="width:100%">
              </div>
              <div class="column">
                <img src="FU2_analysis2/results3.jpg"  style="width:100%">
              </div>
              <div class="column">
                <img src="FU2_analysis2/results4.jpg"  style="width:100%">
              </div>
          </div>
        </div>

拼图完成，之后可以增加一点分割线，方法有很多。

在style中定义垂直中线的样式

.vl {
  border-left: 3px solid rgb(144, 248, 248);
  height: 90%;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 0;
}

在<body>中增加一个该样式的<div>即可

<div class="vl"></div>

也可以增加水平的分割线，使用HR放在<body>中适合的位置即可

<HR align=center width=100% color=#987cb9 SIZE=1>

用bash写html

在对HTML的基本操作了然于心之后，可以使用代码批量修改html中的内容了。主要是两种方式，第一使用JS<script>载入这些图片，第二使用编程语言生成所需html，基本是hardcoding，但可以用for循环偷懒。第一种是最正确的方式，但不是一两个小时可以搞明白的，这里尝试第二种，用shell script，当然任何编程语言都可以胜任。

下面是主要的循环部分，其他部分全部是用echo做hardcoding。

analysis_list=('analysis1' 'analysis2')
data_list=('BSL_' 'FU2_')
results_list=('results1.jpg' 'results2.jpg' 'results3.jpg' 'results4.jpg')


for ana in ${analysis_list[@]};do
  echo  "<h3> $ana </h3>" >> test.html
  echo  "<div class=\"row\">" >> test.html
  for data in ${data_list[@]};do
  echo $data 
    for results in ${results_list[@]};do
      file2load=$data$ana/$results
      echo   "<div class=\"column\">" >> test.html
      echo   "<img src=\"$file2load\"  style=\"width:100%\">" >> test.html
      echo  "</div>" >> test.html
    done
  done
  echo "</div>"  >> test.html
done

最后的建议