图片裁剪是现代 Web 应用中常见的功能需求，无论是社交媒体平台、电商网站还是个人博客，用户经常需要对上传的图片进行裁剪以获得最佳显示效果。本文将介绍如何使用纯前端技术实现一个功能完整的图片裁剪工具，无需后端支持即可在浏览器中完成图片裁剪操作。

实现原理概述

我们的图片裁剪工具基于 HTML5、CSS3 和原生 JavaScript 实现，主要利用以下技术特性：

      使用 HTML5 的 File API 处理图片上传
      通过 CSS 的 clip-path 属性实现图片裁剪效果预览
      使用 Canvas API 生成最终裁剪结果
      结合鼠标事件实现裁剪框的拖拽和缩放交互

实现效果展示

完整功能代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片裁剪demo</title>
    <style type="text/css">
        body {
            background: #555;
        }

        #box {
            position: relative;
        }

        #img1 {
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            user-select: none;
        }

        #img2 {
            opacity: 1;
            position: absolute;
            top: 0;
            left: 0;
            user-select: none;
            /* clip: rect(0px,200px,200px,0px); */
            clip-path: polygon(0px 0px,
                    /* 左上角 */
                    200px 0px,
                    /* 右上角 */
                    200px 200px,
                    /* 右下角 */
                    0px 200px
                    /* 左下角 */
                );
        }

        #main {
            position: absolute;
            width: 200px;
            height: 200px;
            cursor: move;
            display: none;
        }

        .minDiv {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #fff;
        }

        .left-up {
            top: -4px;
            left: -4px;
            cursor: nw-resize;
        }

        .up {
            left: 50%;
            margin-left: -4px;
            margin-top: -4px;
            cursor: n-resize;
        }

        .right-up {
            right: -4px;
            top: -4px;
            cursor: ne-resize;
        }

        .right {
            right: -4px;
            top: 50%;
            margin-top: -4px;
            cursor: e-resize;
        }

        .right-down {
            right: -4px;
            bottom: -4px;
            cursor: se-resize;
        }

        .down {
            bottom: -4px;
            right: 50%;
            margin-left: -4px;
            cursor: s-resize;
        }

        .left-down {
            left: -4px;
            bottom: -4px;
            cursor: sw-resize;
        }

        .left {
            left: -4px;
            top: 50%;
            margin-top: -4px;
            cursor: w-resize;
        }
    </style>
</head>

<body>
    <div class="contain">
        <input id="imgFile" type="file" name="imgFile">
        <button id="preview">预览裁剪结果</button>
        <div id="box">
            <img src="" id="img1">
            <img src="" id="img2">
            <div id="main">
                <div class="minDiv left-up"></div>
                <div class="minDiv up"></div>
                <div class="minDiv right-up"></div>
                <div class="minDiv right"></div>
                <div class="minDiv right-down"></div>
                <div class="minDiv down"></div>
                <div class="minDiv left-down"></div>
                <div class="minDiv left"></div>
            </div>
        </div>
    </div>

</body>

<script>
    const doms = {
        imgFile: document.getElementById('imgFile'),
        preview: document.getElementById('preview'),
        box: document.getElementById('box'),
        img1: document.getElementById('img1'),
        img2: document.getElementById('img2'),
        main: document.getElementById('main'),

        leftUp: document.querySelector('.left-up'),
        up: document.querySelector('.up'),
        rightUp: document.querySelector('.right-up'),
        right: document.querySelector('.right'),
        rightDown: document.querySelector('.right-down'),
        down: document.querySelector('.down'),
        leftDown: document.querySelector('.left-down'),
        left: document.querySelector('.left')
    }
    const dirDoms = [
        doms.leftUp,
        doms.up,
        doms.rightUp,
        doms.right,
        doms.rightDown,
        doms.down,
        doms.leftDown,
        doms.left
    ]

    // 封装：更新裁剪框位置和大小（带边界检查）
    function updateCropBoxPosition(left, top, width, height) {
        // console.log('left, top, width, height', left, top, width, height);

        // 边界检查
        const imgWidth = doms.img1.offsetWidth;
        const imgHeight = doms.img1.offsetHeight;

        // 设置最小尺寸限制
        const minWidth = 60;
        const minHeight = 60;

        // 确保宽度和高度不小于最小值
        if (width < minWidth) width = minWidth;
        if (height < minHeight) height = minHeight;

        // 防止左侧溢出
        if (left < 0) {
            left = 0;
        }

        // 防止右侧溢出
        if (left + width > imgWidth) {
            // 尝试调整位置保持宽度
            if (width <= imgWidth) {
                left = imgWidth - width;
            } else {
                // 如果宽度大于图片宽度，限制宽度并居中显示
                width = imgWidth;
                left = 0;
            }
        }

        // 防止顶部溢出
        if (top < 0) {
            top = 0;
        }

        // 防止底部溢出
        if (top + height > imgHeight) {
            // 尝试调整位置保持高度
            if (height <= imgHeight) {
                top = imgHeight - height;
            } else {
                // 如果高度大于图片高度，限制高度并居中显示
                height = imgHeight;
                top = 0;
            }
        }

        // 设置裁剪框样式
        doms.main.style.left = `${left}px`;
        doms.main.style.top = `${top}px`;
        doms.main.style.width = `${width}px`;
        doms.main.style.height = `${height}px`;

        // 更新裁剪路径
        doms.img2.style.clipPath = `polygon(
        ${left}px ${top}px,
        ${left + width}px ${top}px,
        ${left + width}px ${top + height}px,
        ${left}px ${top + height}px
     )`;
    }

    // 实现图片的上传
    doms.imgFile.onchange = function (e) {
        // 获取上传的图片    
        const file = e.target.files[0];
        // 创建一个文件读取器
        const reader = new FileReader();
        // 读取文件
        reader.readAsDataURL(file);
        // 读取文件成功时，将图片显示在img1和img2中
        reader.onload = function (e) {
            const imgUrl = e.target.result;
            // 设置图片 src 后，监听图片的 load 事件
            doms.img1.src = imgUrl;
            doms.img2.src = imgUrl;

            // 监听 img1 的 load 事件（确保两张图片共享同一 URL，避免重复加载）
            const img = new Image();
            img.src = imgUrl;
            img.onload = function () {
                // 此时图片已完全渲染，可获取正确尺寸
                const imgWidth = doms.img1.offsetWidth;
                const imgHeight = doms.img1.offsetHeight;

                // 初始化裁剪框
                const width = imgWidth / 2;
                const height = imgHeight / 2;
                const left = imgWidth / 4;
                const top = imgHeight / 4;

                updateCropBoxPosition(left, top, width, height);
                doms.main.style.display = 'block';
            };

            // const url = URL.createObjectURL(file);
            // doms.img1.src = url;
            // doms.img2.src = url;
        };
    };

    // 预览裁剪结果
    doms.preview.onclick = function () {
        // 获取裁剪框的位置和大小
        const left = doms.main.offsetLeft;
        const top = doms.main.offsetTop;
        const width = doms.main.offsetWidth;
        const height = doms.main.offsetHeight;
        // console.log(left, top, width, height);
        // 使用canvas将裁剪框中的图片裁剪出来
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(doms.img1, left, top, width, height, 0, 0, width, height);
        // 将裁剪后的图片显示在页面上 不要被裁剪框遮挡
        canvas.style.position = 'absolute';
        canvas.style.left = doms.img1.offsetWidth + 50 + 'px';
        // 如果canvas已经存在，就删除
        if (document.querySelector('canvas')) {
            document.querySelector('canvas').remove();
        }
        document.body.appendChild(canvas);
        canvas.toBlob(function (blob) {
            // console.log(blob);
            const file = new File([blob], 'cut.png', { type: 'image/png' });
            console.log('file', file);
        })
    }

    // 实现裁剪框的拖拽效果
    doms.main.onmousedown = function (e) {
        // 鼠标按下时，获取鼠标的位置
        const startX = e.clientX;
        const startY = e.clientY;
        // console.log(startX, startY);
        // 裁剪框初始位置
        const startLeft = doms.main.offsetLeft;
        const startTop = doms.main.offsetTop;
        // 鼠标移动时，获取鼠标的位置
        document.onmousemove = function (e) {
            const moveX = e.clientX;
            const moveY = e.clientY;
            // 计算鼠标移动的距离
            const disX = moveX - startX;
            const disY = moveY - startY;
            // console.log(disX, disY);
            // 计算裁剪框的位置
            const left = startLeft + disX;
            const top = startTop + disY;
            updateCropBoxPosition(left, top, doms.main.offsetWidth, doms.main.offsetHeight);
        }
        // 鼠标抬起时，停止移动
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        }

    }
    // 实现裁剪框的缩放效果
    dirDoms.forEach(dirDom => {
        dirDom.onmousedown = function (e) {
            // 阻止父元素的事件
            e.stopPropagation();
            // 鼠标按下时，获取鼠标的位置
            const startX = e.clientX;
            const startY = e.clientY;
            // 裁剪框初始位置
            const startLeft = doms.main.offsetLeft;
            const startTop = doms.main.offsetTop;
            // 裁剪框初始大小
            const startWidth = doms.main.offsetWidth;
            const startHeight = doms.main.offsetHeight;
            // 鼠标移动时，获取鼠标的位置
            document.onmousemove = function (e) {
                const moveX = e.clientX;
                const moveY = e.clientY;
                // 计算鼠标移动的距离
                const disX = moveX - startX;
                const disY = moveY - startY;
                // 根据不同点计算裁剪框的位置和大小 
                let left;
                let top;
                let width;
                let height;
                if (dirDom === doms.leftUp) {
                    left = startLeft + disX;
                    top = startTop + disY;
                    width = startWidth - disX;
                    height = startHeight - disY;
                }
                else if (dirDom === doms.up) {
                    left = startLeft;
                    top = startTop + disY;
                    width = startWidth;
                    height = startHeight - disY;
                }
                else if (dirDom === doms.rightUp) {
                    left = startLeft;
                    top = startTop + disY;
                    width = startWidth + disX;
                    height = startHeight - disY;
                }
                else if (dirDom === doms.right) {
                    left = startLeft;
                    top = startTop;
                    width = startWidth + disX;
                    height = startHeight;
                }
                else if (dirDom === doms.rightDown) {
                    left = startLeft;
                    top = startTop;
                    width = startWidth + disX;
                    height = startHeight + disY;
                }
                else if (dirDom === doms.down) {
                    left = startLeft;
                    top = startTop;
                    width = startWidth;
                    height = startHeight + disY;
                }
                else if (dirDom === doms.leftDown) {
                    left = startLeft + disX;
                    top = startTop;
                    width = startWidth - disX;
                    height = startHeight + disY;
                }
                else if (dirDom === doms.left) {
                    left = startLeft + disX;
                    top = startTop;
                    width = startWidth - disX;
                    height = startHeight;
                }
                else {
                    left = startLeft;
                    top = startTop;
                    width = startWidth;
                    height = startHeight;
                }

                updateCropBoxPosition(left, top, width, height);
            }
            // 鼠标抬起时，停止移动
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }

    })


</script>

</html>

核心功能解析

1.双图片叠加预览技术

我们使用两张相同的图片叠加显示，底层图片 (img1) 设置为半透明作为背景参考，上层图片 (img2) 使用 clip-path 属性进行裁剪，从而实现裁剪效果的实时预览：

#img1 {
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
}

#img2 {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(0px 0px, 200px 0px, 200px 200px, 0px 200px);
}

2.图片上传与预览

通过 HTML5 的 File API 实现图片上传功能，使用 FileReader 将图片转换为 DataURL 格式并显示在页面上：

doms.imgFile.onchange = function (e) {
    // 获取上传的图片    
    const file = e.target.files[0];
    // 创建一个文件读取器
    const reader = new FileReader();
    // 读取文件
    reader.readAsDataURL(file);
    // 读取文件成功时，将图片显示在img1和img2中
    reader.onload = function (e) {
        const imgUrl = e.target.result;
        // 设置图片 src 后，监听图片的 load 事件
        doms.img1.src = imgUrl;
        doms.img2.src = imgUrl;

        // 监听 img1 的 load 事件（确保两张图片共享同一 URL，避免重复加载）
        const img = new Image();
        img.src = imgUrl;
        img.onload = function () {
            // 此时图片已完全渲染，可获取正确尺寸
            const imgWidth = doms.img1.offsetWidth;
            const imgHeight = doms.img1.offsetHeight;

            // 初始化裁剪框
            const width = imgWidth / 2;
            const height = imgHeight / 2;
            const left = imgWidth / 4;
            const top = imgHeight / 4;

            updateCropBoxPosition(left, top, width, height);
            doms.main.style.display = 'block';
        };

        // const url = URL.createObjectURL(file);
        // doms.img1.src = url;
        // doms.img2.src = url;
    };
};

3.裁剪框的拖拽与缩放交互

核心就是确定裁剪框最终的left，top，width以及height的值，通过监听鼠标事件实现裁剪框的拖拽和缩放功能：

// 实现裁剪框的拖拽效果
doms.main.onmousedown = function (e) {
    // 鼠标按下时，获取鼠标的位置
    const startX = e.clientX;
    const startY = e.clientY;
    // console.log(startX, startY);
    // 裁剪框初始位置
    const startLeft = doms.main.offsetLeft;
    const startTop = doms.main.offsetTop;
    // 鼠标移动时，获取鼠标的位置
    document.onmousemove = function (e) {
        const moveX = e.clientX;
        const moveY = e.clientY;
        // 计算鼠标移动的距离
        const disX = moveX - startX;
        const disY = moveY - startY;
        // console.log(disX, disY);
        // 计算裁剪框的位置
        const left = startLeft + disX;
        const top = startTop + disY;
        updateCropBoxPosition(left, top, doms.main.offsetWidth, doms.main.offsetHeight);
    }
    // 鼠标抬起时，停止移动
    document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}


// 实现裁剪框的缩放效果
dirDoms.forEach(dirDom => {
    dirDom.onmousedown = function (e) {
        // 阻止父元素的事件
        e.stopPropagation();
        // 鼠标按下时，获取鼠标的位置
        const startX = e.clientX;
        const startY = e.clientY;
        // 裁剪框初始位置
        const startLeft = doms.main.offsetLeft;
        const startTop = doms.main.offsetTop;
        // 裁剪框初始大小
        const startWidth = doms.main.offsetWidth;
        const startHeight = doms.main.offsetHeight;
        // 鼠标移动时，获取鼠标的位置
        document.onmousemove = function (e) {
            const moveX = e.clientX;
            const moveY = e.clientY;
            // 计算鼠标移动的距离
            const disX = moveX - startX;
            const disY = moveY - startY;
            // 根据不同点计算裁剪框的位置和大小 
            let left;
            let top;
            let width;
            let height;
            if (dirDom === doms.leftUp) {
                left = startLeft + disX;
                top = startTop + disY;
                width = startWidth - disX;
                height = startHeight - disY;
            }
            else if (dirDom === doms.up) {
                left = startLeft;
                top = startTop + disY;
                width = startWidth;
                height = startHeight - disY;
            }
            else if (dirDom === doms.rightUp) {
                left = startLeft;
                top = startTop + disY;
                width = startWidth + disX;
                height = startHeight - disY;
            }
            else if (dirDom === doms.right) {
                left = startLeft;
                top = startTop;
                width = startWidth + disX;
                height = startHeight;
            }
            else if (dirDom === doms.rightDown) {
                left = startLeft;
                top = startTop;
                width = startWidth + disX;
                height = startHeight + disY;
            }
            else if (dirDom === doms.down) {
                left = startLeft;
                top = startTop;
                width = startWidth;
                height = startHeight + disY;
            }
            else if (dirDom === doms.leftDown) {
                left = startLeft + disX;
                top = startTop;
                width = startWidth - disX;
                height = startHeight + disY;
            }
            else if (dirDom === doms.left) {
                left = startLeft + disX;
                top = startTop;
                width = startWidth - disX;
                height = startHeight;
            }
            else {
                left = startLeft;
                top = startTop;
                width = startWidth;
                height = startHeight;
            }

            updateCropBoxPosition(left, top, width, height);
        }
        // 鼠标抬起时，停止移动
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }

})

4.边界检查与尺寸限制

为了确保裁剪框不会超出图片范围，我们实现了边界检查功能：

function updateCropBoxPosition(left, top, width, height) {
    // console.log('left, top, width, height', left, top, width, height);

    // 边界检查
    const imgWidth = doms.img1.offsetWidth;
    const imgHeight = doms.img1.offsetHeight;

    // 设置最小尺寸限制
    const minWidth = 60;
    const minHeight = 60;

    // 确保宽度和高度不小于最小值
    if (width < minWidth) width = minWidth;
    if (height < minHeight) height = minHeight;

    // 防止左侧溢出
    if (left < 0) {
        left = 0;
    }

    // 防止右侧溢出
    if (left + width > imgWidth) {
        // 尝试调整位置保持宽度
        if (width <= imgWidth) {
            left = imgWidth - width;
        } else {
            // 如果宽度大于图片宽度，限制宽度并居中显示
            width = imgWidth;
            left = 0;
        }
    }

    // 防止顶部溢出
    if (top < 0) {
        top = 0;
    }

    // 防止底部溢出
    if (top + height > imgHeight) {
        // 尝试调整位置保持高度
        if (height <= imgHeight) {
            top = imgHeight - height;
        } else {
            // 如果高度大于图片高度，限制高度并居中显示
            height = imgHeight;
            top = 0;
        }
    }

    // 设置裁剪框样式
    doms.main.style.left = `${left}px`;
    doms.main.style.top = `${top}px`;
    doms.main.style.width = `${width}px`;
    doms.main.style.height = `${height}px`;

    // 更新裁剪路径
    doms.img2.style.clipPath = `polygon(
    ${left}px ${top}px,
    ${left + width}px ${top}px,
    ${left + width}px ${top + height}px,
    ${left}px ${top + height}px
    )`;
}

5.最终裁剪结果生成

使用 Canvas API 将裁剪区域导出为新的图片（需要注意使用drawImage时如果img区域与原图大小如果不一致的话，需要额外计算缩放比例来确定最终的裁剪区域）：

doms.preview.onclick = function () {
    // 获取裁剪框的位置和大小
    const left = doms.main.offsetLeft;
    const top = doms.main.offsetTop;
    const width = doms.main.offsetWidth;
    const height = doms.main.offsetHeight;
    // console.log(left, top, width, height);
    // 使用canvas将裁剪框中的图片裁剪出来
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(doms.img1, left, top, width, height, 0, 0, width, height);
    // 将裁剪后的图片显示在页面上 不要被裁剪框遮挡
    canvas.style.position = 'absolute';
    canvas.style.left = doms.img1.offsetWidth + 50 + 'px';
    // 如果canvas已经存在，就删除
    if (document.querySelector('canvas')) {
        document.querySelector('canvas').remove();
    }
    document.body.appendChild(canvas);
    canvas.toBlob(function (blob) {
        // console.log(blob);
        const file = new File([blob], 'cut.png', { type: 'image/png' });
        console.log('file', file);
    })
}

总结

通过结合 HTML5 的 File API、CSS 的 clip-path 属性和 Canvas API，我们实现了一个功能完整的纯前端图片裁剪工具。这个实现不需要后端支持，所有操作都在浏览器中完成，具有良好的用户体验和性能表现。
可以根据自己的需求进一步扩展这个工具，例如添加预设裁剪比例、旋转功能、滤镜效果等，使其成为一个更强大的图片编辑工具。