百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

批处理自动生成图片自适应大小、以图片文件名为描述的图片网页

liuian 2024-12-04 13:45 14 浏览

有以下老照片文件夹：

写一个批处理(bat)自动建立图片网页，并有并对每一图片以文件做描述，网页使用<div>标签，宽度为74.125%，div居中，内容左对齐，图片宽度如果超过这个宽度，自动使用这个宽度，效果如下：

使用的CSS：

<style type=text/css> 
div{width:74.125%;} 
div{margin:auto;} 
img{display:block;} 
img{padding:2px 0px 16px 0px;} 
img{border:0 red solid;} 
a:link{text-decoration: none; color:#fff;} 
</style>

使用的JS：

<script> 	
window.onload = function() { // 超出容器宽度的图片按容器宽度显示 	
    var div = document.getElementsByTagName("div"); 	
    //var _w = div.offsetWidth;    // 返回元素的总宽度 	
    var _w = document.querySelector(".wrap").offsetWidth 	
    var Imgarray = document.getElementsByTagName("img"); 	
    var realWidth; //真实的宽度 	
    var realHeight; //真实的高度 	
    for (var i = 0; i < Imgarray.length; i++) { 	
        var imgtemp = new Image(); //创建一个image对象 	
        imgtemp.src = Imgarray[i].src; 	
        imgtemp.index = i; //指定一个检索值，用于确定是哪张图 	
        imgtemp.onload = function() { //图片加载完成后执行 	
            var _stemp = this; //将当前指针复制给新的变量，不然会导致变量共用 	
            realWidth = this.width; 	
            if (realWidth >= _w) { 	
                Imgarray[_stemp.index].style.width = _w + 'px'; 	
            } else { 	
                Imgarray[_stemp.index].style.width = realWidth + 'px'; 	
            }}}} 	
</script>

批处理(bat)生成的html

<div class=wrap> 
<p style="text-indent:-2em;">The three Soong sisters1940 ↓</p> 
<a href="The three Soong sisters1940.png" title="The three Soong sisters1940.png"><img src="The three Soong sisters1940.png" /></a> 
<p style="text-indent:-2em;">邓颖超和周恩来1970 ↓</p> 
<a href="邓颖超和周恩来1970.jpg" title="邓颖超和周恩来1970.jpg"><img src="邓颖超和周恩来1970.jpg" /></a> 
<p style="text-indent:-2em;">李讷、林豆豆、聂力、陶斯亮1961 ↓</p> 
<a href="李讷、林豆豆、聂力、陶斯亮1961.jpg" title="李讷、林豆豆、聂力、陶斯亮1961.jpg"><img src="李讷、林豆豆、聂力、陶斯亮1961.jpg" /></a> 
<p style="text-indent:-2em;">刘少奇、王光美1948 ↓</p> 
<a href="刘少奇、王光美1948.jpg" title="刘少奇、王光美1948.jpg"><img src="刘少奇、王光美1948.jpg" /></a> 
<p style="text-indent:-2em;">毛岸英与刘思齐 ↓</p> 
<a href="毛岸英与刘思齐.jpg" title="毛岸英与刘思齐.jpg"><img src="毛岸英与刘思齐.jpg" /></a> 
<p style="text-indent:-2em;">钱钟书与杨绛1934 ↓</p> 
<a href="钱钟书与杨绛1934.jpg" title="钱钟书与杨绛1934.jpg"><img src="钱钟书与杨绛1934.jpg" /></a> 
<p style="text-indent:-2em;">孙中山和宋庆龄 ↓</p> 
<a href="孙中山和宋庆龄.jpg" title="孙中山和宋庆龄.jpg"><img src="孙中山和宋庆龄.jpg" /></a> 
<p style="text-indent:-2em;">杨振宁、李政道、杜致礼、秦惠jun ↓</p> 
<a href="杨振宁、李政道、杜致礼、秦惠jun.jpg" title="杨振宁、李政道、杜致礼、秦惠jun.jpg"><img src="杨振宁、李政道、杜致礼、秦惠jun.jpg" /></a> 
<p style="text-indent:-2em;">朱毛邓周 ↓</p> 
<a href="朱毛邓周.jpg" title="朱毛邓周.jpg"><img src="朱毛邓周.jpg" /></a> 
<p style="text-indent:-2em;">走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937 ↓</p> 
<a href="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg" title="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg"><img src="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg" /></a> 
</div>

完整的bat：

::chcp 65001
::type head.txt >picList.html

echo ^<!DOCTYPE html^> >picList.html
echo ^<html xmlns="http://www.w3.org/1999/xhtml"^> >>picList.html
echo ^<meta content="text/html; charset=utf-8" /^> >>picList.html

echo ^<head^> >>picList.html
echo ^<title^>picList^</title^> >>picList.html
echo ^<style type=text/css^> >>picList.html
echo div{width:74.125^%%;} >>picList.html
echo div{margin^:auto;} >>picList.html
echo img{display^:block;} >>picList.html
::echo img{margin^:auto;} // 图片居中中>>picList.html
echo img{padding^:2px 0px 16px 0px;} >>picList.html
echo img{border^:0 red solid;} >>picList.html
echo a:link{text-decoration: none; color:#fff;} >>picList.html
echo ^</style^> >> picList.html
echo ^</head^> >> picList.html

echo ^<script^> >>picList.html	
echo window.onload = function() { // 超出容器宽度的图片按容器宽度显示 >>picList.html	
echo     var div = document.getElementsByTagName("div"); >>picList.html	
echo     //var _w = div.offsetWidth;    // 返回元素的总宽度 >>picList.html	
echo     var _w = document.querySelector(".wrap").offsetWidth >>picList.html	
echo     var Imgarray = document.getElementsByTagName("img"); >>picList.html	
echo     var realWidth; //真实的宽度 >>picList.html	
echo     var realHeight; //真实的高度 >>picList.html	
echo     for (var i = 0; i ^< Imgarray.length; i++) { >>picList.html	
echo         var imgtemp = new Image(); //创建一个image对象 >>picList.html	
echo         imgtemp.src = Imgarray[i].src; >>picList.html	
echo         imgtemp.index = i; //指定一个检索值，用于确定是哪张图 >>picList.html	
echo         imgtemp.onload = function() { //图片加载完成后执行 >>picList.html	
echo             var _stemp = this; //将当前指针复制给新的变量，不然会导致变量共用 >>picList.html	
echo             realWidth = this.width; >>picList.html	
echo             if (realWidth ^>= _w) { >>picList.html	
echo                 Imgarray[_stemp.index].style.width = _w + 'px'; >>picList.html	
echo             } else { >>picList.html	
echo                 Imgarray[_stemp.index].style.width = realWidth + 'px'; >>picList.html	
echo             }}}} >>picList.html	
echo ^</script^> >>picList.html

echo ^<body^> >>picList.html
echo ^<div class=wrap^> >>picList.html
for /f "tokens=1,2 usebackq delims=." %%b in (`dir /o:n /b`) do (  ::n是按文件名，d是按日期
	if not "%%c" == "bat" (
	if not "%%c" == "html" (
		echo ^<p style="text-indent:-2em;"^>%%b ↓^</p^> >>picList.html
		echo ^<a href="%%b.%%c" title="%%b.%%c"^>^<img src="%%b.%%c" /^>^</a^> >>picList.html
	)
	)
)

echo ^</div^> >>picList.html
echo ^</body^> >>picList.html
echo ^</html^> >>picList.html

::for %a in (*.html) do echo "<a href=%a>%a</a>" >>picList.html
::type end.txt >>picList.html
::delims=.后面如果有空格，对于文件名中如果有空格时则会出错；
::dir /o:d /b：显示文件夹名或文件名（包括扩展名）；

批处理生成的完整的html文件：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta content="text/html; charset=utf-8" /> 
<head> 
<title>picList</title> 
<style type=text/css> 
div{width:74.125%;} 
div{margin:auto;} 
img{display:block;} 
img{padding:2px 0px 16px 0px;} 
img{border:0 red solid;} 
a:link{text-decoration: none; color:#fff;} 
</style> 
</head> 
<script> 	
window.onload = function() { // 超出容器宽度的图片按容器宽度显示 	
    var div = document.getElementsByTagName("div"); 	
    //var _w = div.offsetWidth;    // 返回元素的总宽度 	
    var _w = document.querySelector(".wrap").offsetWidth 	
    var Imgarray = document.getElementsByTagName("img"); 	
    var realWidth; //真实的宽度 	
    var realHeight; //真实的高度 	
    for (var i = 0; i < Imgarray.length; i++) { 	
        var imgtemp = new Image(); //创建一个image对象 	
        imgtemp.src = Imgarray[i].src; 	
        imgtemp.index = i; //指定一个检索值，用于确定是哪张图 	
        imgtemp.onload = function() { //图片加载完成后执行 	
            var _stemp = this; //将当前指针复制给新的变量，不然会导致变量共用 	
            realWidth = this.width; 	
            if (realWidth >= _w) { 	
                Imgarray[_stemp.index].style.width = _w + 'px'; 	
            } else { 	
                Imgarray[_stemp.index].style.width = realWidth + 'px'; 	
            }}}} 	
</script> 
<body> 
<div class=wrap> 
<p style="text-indent:-2em;">The three Soong sisters1940 ↓</p> 
<a href="The three Soong sisters1940.png" title="The three Soong sisters1940.png"><img src="The three Soong sisters1940.png" /></a> 
<p style="text-indent:-2em;">邓颖超和周恩来1970 ↓</p> 
<a href="邓颖超和周恩来1970.jpg" title="邓颖超和周恩来1970.jpg"><img src="邓颖超和周恩来1970.jpg" /></a> 
<p style="text-indent:-2em;">李讷、林豆豆、聂力、陶斯亮1961 ↓</p> 
<a href="李讷、林豆豆、聂力、陶斯亮1961.jpg" title="李讷、林豆豆、聂力、陶斯亮1961.jpg"><img src="李讷、林豆豆、聂力、陶斯亮1961.jpg" /></a> 
<p style="text-indent:-2em;">刘少奇、王光美1948 ↓</p> 
<a href="刘少奇、王光美1948.jpg" title="刘少奇、王光美1948.jpg"><img src="刘少奇、王光美1948.jpg" /></a> 
<p style="text-indent:-2em;">毛岸英与刘思齐 ↓</p> 
<a href="毛岸英与刘思齐.jpg" title="毛岸英与刘思齐.jpg"><img src="毛岸英与刘思齐.jpg" /></a> 
<p style="text-indent:-2em;">钱钟书与杨绛1934 ↓</p> 
<a href="钱钟书与杨绛1934.jpg" title="钱钟书与杨绛1934.jpg"><img src="钱钟书与杨绛1934.jpg" /></a> 
<p style="text-indent:-2em;">孙中山和宋庆龄 ↓</p> 
<a href="孙中山和宋庆龄.jpg" title="孙中山和宋庆龄.jpg"><img src="孙中山和宋庆龄.jpg" /></a> 
<p style="text-indent:-2em;">杨振宁、李政道、杜致礼、秦惠jun ↓</p> 
<a href="杨振宁、李政道、杜致礼、秦惠jun.jpg" title="杨振宁、李政道、杜致礼、秦惠jun.jpg"><img src="杨振宁、李政道、杜致礼、秦惠jun.jpg" /></a> 
<p style="text-indent:-2em;">朱毛邓周 ↓</p> 
<a href="朱毛邓周.jpg" title="朱毛邓周.jpg"><img src="朱毛邓周.jpg" /></a> 
<p style="text-indent:-2em;">走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937 ↓</p> 
<a href="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg" title="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg"><img src="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg" /></a> 
</div> 
</body> 
</html>

－End－

相关推荐

GANs为何引爆机器学习?这篇基于TensorFlow的实例教程为你解惑!

「机器人圈导览」：生成对抗网络无疑是机器学习领域近三年来最火爆的研究领域，相关论文层出不求，各种领域的应用层出不穷。那么，GAN到底如何实践？本文编译自Medium，该文作者以一朵玫瑰花为例，详细阐...

高丽大学等机构联合发布StarGAN:可自定义表情和面部特征

原文来源：arXiv、GitHub作者：YunjeyChoi、MinjeChoi、MunyoungKim、Jung-WooHa、SungKim、JaegulChoo「雷克世界」编译：嗯~...

TensorFlow和PyTorch相继发布最新版，有何变化

原文来源：GitHub「机器人圈」编译：嗯~阿童木呀、多啦A亮Tensorflow主要特征和改进在Tensorflow库中添加封装评估量。所添加的评估量列表如下：1.深度神经网络分类器（DNNCl...

「2022 年」崔庆才 Python3 爬虫教程 - 深度学习识别滑动验证码缺口

上一节我们使用OpenCV识别了图形验证码躯壳欧。这时候就有朋友可能会说了，现在深度学习不是对图像识别很准吗？那深度学习可以用在识别滑动验证码缺口位置吗？当然也是可以的，本节我们就来了解下使用深度...

20K star!搞定 LLM 微调的开源利器

LLM（大语言模型）微调一直都是老大难问题，不仅因为微调需要大量的计算资源，而且微调的方法也很多，要去尝试每种方法的效果，需要安装大量的第三方库和依赖，甚至要接入一些框架，可能在还没开始微调就已经因为...

大模型DeepSeek本地部署后如何进行自定义调整?

1.理解模型架构a)查看深度求索官方文档或提供的源代码文件，了解模型的结构、输入输出格式以及支持的功能。模型是否为预训练权重？如果是，可以在预训练的基础上进行微调（Fine-tuning）。是否需要...

因配置不当，约5000个AI模型与数据集在公网暴露

除了可访问机器学习模型外，暴露的数据还可能包括训练数据集、超参数，甚至是用于构建模型的原始数据。前情回顾·人工智能安全动态向ChatGPT植入恶意“长期记忆”，持续窃取用户输入数据多模态大语言模型的致...

基于pytorch的深度学习人员重识别

基于pytorch的深度学习人员重识别Torchreid是一个库。基于pytorch的深度学习人员重识别。特点：支持多GPU训练支持图像的人员重识别与视频的人员重识别端到端的训练与评估简单的re...

DeepSeek本地部署:轻松训练你的AI模型

引言：为什么选择本地部署？在AI技术飞速发展的今天，越来越多的企业和个人希望将AI技术应用于实际场景中。然而，对于一些对数据隐私和计算资源有特殊需求的用户来说，云端部署可能并不是最佳选择。此时，本地部...

谷歌今天又开源了，这次是Sketch-RNN

前不久，谷歌公布了一项最新技术，可以教机器画画。今天，谷歌开源了代码。在我们研究其代码之前，首先先按要求设置Magenta环境。（https://github.com/tensorflow/magen...

Tensorflow 使用预训练模型训练的完整流程

前面已经介绍了深度学习框架Tensorflow的图像的标注和训练数据的准备工作，本文介绍一下使用预训练模型完成训练并导出训练的模型。1.选择预训练模型1.1下载预训练模型首先需要在Tensorf...

30天大模型调优学习计划（30分钟训练大模型）

30天大模型调优学习计划，结合Unsloth和Lora进行大模型微调，掌握大模型基础知识和调优方法，熟练应用。第1周：基础入门目标：了解大模型基础并熟悉Unsloth等工具的基本使用。Day1：大模...

python爬取喜马拉雅音频，json参数解析

一.抓包分析json，获取加密方式1.抓包获取音频界面f12打开抓包工具，播放一个（非vip）视频，点击“媒体”单击打开可以复制URL，发现就是我们要的音频。复制“CKwRIJEEXn-cABa0Tg...

五、JSONPath使用(Python)（json数据python）

1.安装方法pipinstalljsonpath2.jsonpath与Xpath下面表格是jsonpath语法与Xpath的完整概述和比较。Xpathjsonpath概述/$根节点.@当前节点...

Python网络爬虫的时候json=就是让你少写个json.dumps()

大家好，我是皮皮。一、前言前几天在Python白银交流群【空翼】问了一个Python网络爬虫的问题，提问截图如下：登录请求地址是这个：二、实现过程这里【甯同学】给了一个提示，如下所示：估计很多小伙伴和...

一周热门
最近发表
标签列表