裁剪学习

<title>Trim Image White Space</title>

<input type="file" id="upload" accept="image/*">
<canvas id="canvas" style="display: none;"></canvas>
<img id="trimmedImage" alt="Trimmed Image">

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

        reader.onload = function (e) {
            const img = new Image();
            img.onload = function () {
                const canvas = document.getElementById('canvas');
                const ctx = canvas.getContext('2d');

                // Set canvas dimensions to match the image
                canvas.width = img.width;
                canvas.height = img.height;

                // Draw the image onto the canvas
                ctx.drawImage(img, 0, 0);

                // Get the image data
                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const data = imageData.data;

                // Find the bounding box of non-transparent pixels
                let top = 0, left = 0, right = img.width, bottom = img.height;
                let foundTop = false, foundLeft = false, foundRight = false, foundBottom = false;

                for (let y = 0; y < img.height; y++) {
                    for (let x = 0; x < img.width; x++) {
                        const index = (y * img.width + x) * 4;
                        const alpha = data[index + 3];
                        if (alpha !== 0) {
                            if (!foundTop) {
                                top = y;
                                foundTop = true;
                            }
                            if (!foundLeft || x < left) {
                                left = x;
                                foundLeft = true;
                            }
                            if (!foundRight || x > right) {
                                right = x;
                                foundRight = true;
                            }
                            if (!foundBottom || y > bottom) {
                                bottom = y;
                                foundBottom = true;
                            }
                        }
                    }
                }

                // Calculate the new dimensions
                const width = right - left + 1;
                const height = bottom - top + 1;

                // Create a new canvas to hold the trimmed image
                const trimmedCanvas = document.createElement('canvas');
                const trimmedCtx = trimmedCanvas.getContext('2d');
                trimmedCanvas.width = width;
                trimmedCanvas.height = height;

                // Draw the trimmed image onto the new canvas
                trimmedCtx.drawImage(canvas, left, top, width, height, 0, 0, width, height);

                // Get the trimmed image as a data URL
                const trimmedDataUrl = trimmedCanvas.toDataURL();
                const trimmedImage = document.getElementById('trimmedImage');
                trimmedImage.src = trimmedDataUrl;
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    });
</script>