刚刚分享了一个用Python写的源码,我担心很多小伙伴不会直接用,就再贴出一个HTML的,直接调用过来就可以用了。
非常简单,复制这个文档,然后改文件后缀为html粘贴双击打开就行。
也是用GPT写的,然后UI样式库是让他参考推特修改的,有需要的小伙伴直接复制就好了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MJ图片裁剪工具-来自于怪木副业网www.guaimu.com</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f8fa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
h1 {
color: #1da1f2;
}
input[type="file"] {
display: none;
}
label {
background-color: #1da1f2;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 10px;
cursor: pointer;
border-radius: 5px;
}
button {
background-color: #1da1f2;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 10px;
cursor: pointer;
border-radius: 5px;
}
#canvas {
border: 1px solid black;
display: none;
}
.cut-image {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
max-width: 200px;
width: 100%;
height: auto;
object-fit: cover;
cursor: pointer;
transition: transform 0.3s ease;
}
.cut-image:hover {
transform: scale(1.1);
}
.result-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 20px;
max-height: 70vh;
overflow-y: auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 30%;
text-align: center;
}
.modal p {
font-size: 1.5em;
margin: 0;
}
</style>
</head>
<body>
<h1>MJ图片裁剪工具</h1>
<input type="file" id="uploadImages" multiple accept="image/*">
<label for="uploadImages">选择图片</label>
<button id="cutImages" disabled>批量裁剪</button>
<button id="exportAll" disabled>导出所有图片</button>
<canvas id="canvas"></canvas>
<div id="resultImages" class="result-container"></div>
<div id="modal" class="modal">
<div class="modal-content">
<p>正在裁剪,请稍候...</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js" crossorigin="anonymous"></script>
<script>
const uploadImages = document.getElementById('uploadImages');
const cutImages = document.getElementById('cutImages');
const exportAll = document.getElementById('exportAll');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const resultImages = document.getElementById('resultImages');
const imageList = [];
let cutImageList = [];
function processImage(img) {
return new Promise((resolve, reject) => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
resolve();
});
}
function cutImage(img) {
const smallImageWidth = img.width / 2;
const smallImageHeight = img.height / 2;
const cutImagesData = [];
for (let y = 0; y < 2; y++) {
for (let x = 0; x < 2; x++) {
const cutCanvas = document.createElement('canvas');
cutCanvas.width = smallImageWidth;
cutCanvas.height = smallImageHeight;
const cutCtx = cutCanvas.getContext('2d');
cutCtx.drawImage(
img,
x * smallImageWidth,
y * smallImageHeight,
smallImageWidth,
smallImageHeight,
0,
0,
smallImageWidth,
smallImageHeight
);
const smallImageDataUrl = cutCanvas.toDataURL("image/png");
cutImagesData.push(smallImageDataUrl);
const smallImage = new Image();
smallImage.src = smallImageDataUrl;
smallImage.classList.add('cut-image');
resultImages.appendChild(smallImage);
cutImageList.push(smallImageDataUrl);
}
}
return cutImagesData;
}
cutImages.addEventListener('click', function () {
cutImageList = [];
resultImages.innerHTML = '';
});
exportAll.addEventListener('click', function () {
const zip = new JSZip();
cutImageList.forEach((dataURL, index) => {
const base64Data = dataURL.replace(/^data:image\/png;base64,/, "");
zip.file(`image${index + 1}.png`, base64Data, { base64: true });
});
zip.generateAsync({ type: "blob" }).then(function (content) {
const url = URL.createObjectURL(content);
const a = document.createElement('a');
a.href = url;
a.download = 'cut-images.zip';
a.click();
});
});
async function cutAllImages() {
for (const img of imageList) {
cutImage(img);
await new Promise((resolve) => setTimeout(resolve, 100));
}
}
function displayResultImage(image) {
const imgElement = new Image();
imgElement.src = image.src;
imgElement.className = 'cut-image';
resultImages.appendChild(imgElement);
}
// 获取模态框元素
const modal = document.getElementById('modal');
// 在上传图片后,显示提示消息
uploadImages.addEventListener('change', async function () {
imageList.length = 0; // 清空 imageList 数组
cutImages.disabled = false;
exportAll.disabled = false;
resultImages.innerHTML = '';
const promises = [];
for (const file of uploadImages.files) {
const img = new Image();
img.src = URL.createObjectURL(file);
const imgPromise = new Promise((resolve) => {
img.onload = function () {
imageList.push(img);
resolve();
};
});
promises.push(imgPromise);
}
await Promise.all(promises);
alert('图片已上传!');
});
// 在点击“批量裁剪”按钮时,显示模态框
cutImages.addEventListener('click', async function () {
cutImageList = []; // 清空 cutImageList 数组
resultImages.innerHTML = '';
modal.style.display = 'block';
setTimeout(async () => {
await cutAllImages();
modal.style.display = 'none';
}, 0);
});
</script>
</body>
</html>