网址：图片批量编辑（架设在github上，更新快）或 图片批量编辑
因为某些需要，找了半天也没在手机上找到能够批量编辑图片的软件或者是网站，有些网站只能上传几个图片，多了就得登陆或者开会员😅，所以就花了点时间手搓了个网站
优点：图片不会上传到服务器，所有操作均在本地进行，处理速度快，断网也能用
结束
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片批量编辑</title>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<style>
header {
background-color: #2c3e50;
color: white;
padding: 10px 0;
text-align: center;
font-size: 1.5rem;
}
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
width: 100%;
margin-top: 20px;
}
.image-grid img {
width: 100%;
height: auto;
border-radius: 4px;
object-fit: cover;
}
/\* 底部按钮布局 \*/
.navbar-bottom {
position: fixed;
bottom: 0;
width: 100%;
background-color: #f8f9fa;
border-top: 1px solid #dee2e6;
padding: 10px 0;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.navbar-bottom button {
background: none;
border: none;
color: gray;
font-size: 1rem;
cursor: pointer;
}
.navbar-bottom button.active {
color: lightblue;
}
/\* 水印设置弹窗样式 \*/
#watermark-modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
#watermark-modal h3 {
margin-top: 0;
}
#watermark-modal label {
display: block;
margin-top: 10px;
}
#watermark-modal input\[type="range"\] {
width: 100%;
}
#watermark-modal button {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
</style>#图片批量编辑
<input type="file" id="image-input" accept="image/\*" multiple style="display:none;">
<div class="image-grid" id="image-grid"></div>