JavaScript四等分切割图片的代码教程，一张图片对等切成四份源码

蔚蓝de笔记

于 2023-05-11 17:56:54 发布

阅读量703

点赞数 2

文章标签： javascript css css3

本文链接：https://blog.csdn.net/qq_43805552/article/details/130627621

版权

刚刚分享了一个用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>