js 上传切割图片

在JavaScript中实现图片上传并切割的功能，通常涉及以下几个步骤：

基础概念

图片上传：用户通过网页选择图片文件，并将其发送到服务器的过程。
图片切割：将一张图片按照指定的区域或尺寸分割成多张小图片。

类型

固定尺寸切割：按照预设的宽度和高度进行切割。
自由区域切割：根据用户指定的区域进行切割。

应用场景

拼图游戏：将一张大图片切割成多个小块，用户需要重新组合。
图片编辑：在上传前对图片进行裁剪，去除不需要的部分。
缩略图生成：将大图片切割成多个小缩略图，便于展示。

实现步骤

HTML部分：创建文件上传控件和显示切割后图片的区域。
JavaScript部分：读取上传的图片文件，进行切割，并显示切割后的图片。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传并切割</title>
</head>
<body>
    <input type="file" id="upload" accept="image/*">
    <div id="output"></div>

    <script>
        document.getElementById('upload').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(e) {
                const img = new Image();
                img.onload = function() {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);

                    const rows = 2; // 切割行数
                    const cols = 2; // 切割列数
                    const width = canvas.width / cols;
                    const height = canvas.height / rows;

                    const output = document.getElementById('output');
                    output.innerHTML = ''; // 清空之前的图片

                    for (let r = 0; r < rows; r++) {
                        for (let c = 0; c < cols; c++) {
                            const cropCanvas = document.createElement('canvas');
                            cropCanvas.width = width;
                            cropCanvas.height = height;
                            const cropCtx = cropCanvas.getContext('2d');
                            cropCtx.drawImage(
                                canvas,
                                c * width,
                                r * height,
                                width,
                                height,
                                0,
                                0,
                                width,
                                height
                            );
                            const croppedImage = new Image();
                            croppedImage.src = cropCanvas.toDataURL('image/png');
                            output.appendChild(croppedImage);
                        }
                    }
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        });
    </script>
</body>
</html>