使用HTML批量拼图

几种拼图的方式

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[@]};doecho  "<h3> $ana </h3>" >> test.htmlecho  "<div class=\"row\">" >> test.htmlfor data in ${data_list[@]};doecho $data for results in ${results_list[@]};dofile2load=$data$ana/$resultsecho   "<div class=\"column\">" >> test.htmlecho   "<img src=\"$file2load\"  style=\"width:100%\">" >> test.htmlecho  "</div>" >> test.htmldonedoneecho "</div>"  >> test.html
done

最后的建议

如果手动复制粘贴替换工作量可以接受，直接写html
tiff格式的图片chrome载入不了
html中的引号可以使用斜杠\转义
打印网页成pdf保存，分辨率还不错

使用HTML批量拼图相关推荐

微信开发者工具 wxmi修改模版颜色_开源免费，不错的轻量级图片批量处理工具...
如果你是学生或者工作人士,学习也好,办公也好,总免不了要批量拼图截图,调节图片参数和美化. 整理&排版 | idea君 ,预计阅读时间 | 7分钟软件作者:CNOliverZhang,如有 ...
ppt拼图批量生成 N多ppt一键生成拼图
我们办公中经常用到PPT插件islide里的PPT拼图,可以一个个手工把ppt生成ppt拼图效果,如果想批量把几十上百个ppt一次性生成拼图效果,islide就实现不了. 这是开发的PPT批量执行拼图 ...
PPT批量导出图片拼图网格图多图如何导图插件ppt模板软件
PPT如何批量导图片导出图片呢,一大堆PPT文件,想要预览,一个一个打开的话,也太麻烦了点,这时候应该怎么办呢. 如何批量导出预览图片呢这时候就需要拼图神器啦上图只需要三部 ,即可轻松搞定注意 ...
怎么批量抠复杂的图_怎么用手机修图，抠图、拼图，证件照制作？
今天为小伙伴们分享一款安卓版的美图软件,无需登录就是永久会员,[PS修图软件]一款非常不错的手修图软件,该软件支持抠图.美颜.换背景等等一系列的编辑功能,还支持证件照制作,非常方便,是喜欢拍照的小伙伴 ...
拖拽批量上传图片如何保证顺序_使用 Eagle 探索图片管理新边界
现状在现实生活中,我们付出劳动或金钱来获取物品,随着时间喜欢的东西会越来越多,渐渐的会囤积物品,即使有些物品买回来可能用的次数屈指可数,也没有打算丢弃掉,总是想着将来会有派上用场的一天.抱着这样的心态 ...
双y轴如何合并图例_如何对图表批量组合、对齐、画中画、合并图例、自动化加标签。。。...
关于图表的组合排版,在之前的微信文章中介绍过很多常规的方法,比如<绘制复杂组合图表的独家秘笈分享>.<如何用Graphpad Prism绘制超复杂组合图?>.<如何用Or ...
给图片下方加水印_别再看不起美图秀秀啦，想要做长图，批量加水印，用它超级方便...
Hello大家好,我是撒娇的小肉片. 时隔超长时间的更新,不知道还有多少人记得我哈哈.今天想要和大家分享的是如何批量加水印,如何拼成长图,操作简单,你值得拥有哦~ 最重要的是免费!免费!完全免费! 由 ...
python 马赛克拼图_使用 python 做到马赛克拼图
死宅一枚.爬取5000张二次元妹子的图片,生成了头图. 接下来看看怎么实现的: 使用 Scrapy 框架爬取5000张二次元图使用 opencv 批量格式化图片将图片按照RGB值的均方根排序,实现 ...
照片拼图制作怎么弄？这几个方法或许能帮到你
过年的时候,跟几个相识多年的朋友出门去玩.期间,我们拍摄了许多照片准备用来发朋友圈.回到家后,看到她们因为微信的朋友圈只能上传九张照片而在讨论要用哪张照片的时候,我说出了那句至理名言"小孩子 ...
html中如何把一张图片分块,神奇图片分割软件有哪些分割模式图片分割器如何检验能否无缝拼图...
神奇图片分割软件如何使用?神奇图片分割软件分割图片有哪些模式?神奇图片分割软件自带的批量分割功能在哪?神奇图片分割软件如何无缝拼接已经分割的图片?神奇图片分割软件是一款非常好用的图片分割器,可以按尺寸 ...

使用HTML批量拼图

使用HTML批量拼图相关推荐

最新文章

热门文章