JS实现选择图片剪裁及保存

学习&实践爱好者

已于 2023-06-28 15:32:00 修改

阅读量1k

点赞数 2

分类专栏： JavaScrip技术 HTML5与CSS3 文章标签： javascript 前端

于 2023-06-27 22:00:00 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/131412200

版权

JavaScrip技术同时被 2 个专栏收录

136 篇文章 25 订阅

订阅专栏

HTML5与CSS3

87 篇文章 15 订阅

订阅专栏

JS实现选择图片剪裁及保存

以下是一个简单的示例代码，实现了显示一个文件上传框和一个canvas元素。用户可以选择一张图片文件后，该图像将显示在canvas中，并且用户可以通过鼠标拖拽来选取需要剪裁的区域。单击“剪裁”按钮，程序会将结果保存为新的图片文件并在浏览器中下载。

先看效果图：

源码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS图片剪裁并保存</title>
</head>
<body>    

    <canvas id="canvas" width="800" height="600" style="border:1px solid #000;"></canvas>

    <div>       
       <input type="file" id="fileInput">
       <button id="cropButton" disabled>剪裁</button> 
       用户可以拖动鼠标来选择需要剪裁的区域       
    </div>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let image = null;
        let isDragging = false;
        let startX = 0;
        let startY = 0;
        let endX = 0;
        let endY = 0;

        // 加载图片
        const loadImage = (file) => {
            const reader = new FileReader();
            reader.onload = (e) => {
                image = new Image();
                image.onload = () => {
                    ctx.drawImage(image, 0, 0);
                };
                image.src = e.target.result;
            };
            reader.readAsDataURL(file);
	    disableButtons(); //
        };

        // 监听文件上传事件
        const fileInput = document.getElementById('fileInput');
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            loadImage(file);
        });

        // 监听鼠标事件，绘制选择区域
        canvas.addEventListener('mousedown', (e) => {
            if (isDragging) return;
            isDragging = true;
            startX = e.offsetX;
            startY = e.offsetY;
            endX = startX;
            endY = startY;
        });
        canvas.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            endX = e.offsetX;
            endY = e.offsetY;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(image, 0, 0);
            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
            ctx.fillRect(startX, startY, endX - startX, endY - startY);
        });
        canvas.addEventListener('mouseup', () => {
            isDragging = false;
            if (endX > startX && endY > startY) {
                enableButtons();
            }
        });

        // 监听确定按钮点击事件，剪裁并保存图片
        const cropButton = document.getElementById('cropButton');
        cropButton.addEventListener('click', () => {
            disableButtons();
            const croppedCanvas = document.createElement('canvas');
            const croppedCtx = croppedCanvas.getContext('2d');
            const width = endX - startX;
            const height = endY - startY;
            croppedCanvas.width = width;
            croppedCanvas.height = height;
            croppedCtx.drawImage(canvas, startX, startY, width, height, 0, 0, width, height);
            const url = croppedCanvas.toDataURL();
            const link = document.createElement('a');
            link.download = 'cropped-image.png';
            link.href = url;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });

	// 激活按钮
        const enableButtons = () => {
            cropButton.disabled = false;           
        };

        // 禁用按钮
        const disableButtons = () => {
            cropButton.disabled = true;   
        };
       
    </script>
</body>
</html>

OK！