当前位置：首页 > 行业动态 > 正文

如何使用CropboxJS轻松保存和裁剪图片？

admin
行业动态
2025-01-27
3673

### ，，cropbox.js 是一个轻量级且功能强大的 JavaScript 图像剪裁库，支持多种前端框架，提供实时预览、缩放等功能，适用于各种图片裁剪需求。

CropBox.js 是一个功能强大的 JavaScript 库，用于在网页上实现图片裁剪功能，它允许用户通过简单的界面操作来裁剪图像，并将裁剪后的结果保存到服务器或本地，以下是使用 CropBox.js 保存图片的详细步骤和示例代码：

如何使用CropboxJS轻松保存和裁剪图片？第1张

1. 引入 CropBox.js 和相关依赖

确保你的项目中已经引入了 jQuery（因为 CropBox.js 依赖于 jQuery）和 CropBox.js 脚本文件，你可以通过 CDN 链接引入这些文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CropBox.js 保存图片示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui/1.12.1/themes/base/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cropbox@1.4.0/dist/cropbox.min.js"></script>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
        #image-container {
            position: relative;
            overflow: hidden;
            width: 500px;
            height: 400px;
        }
        #image {
            display: block;
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <input type="file" id="upload" />
    <div id="image-container">
        <img id="image" src="" >
    </div>
    <button id="save">保存裁剪后的图片</button>
    <script>
        $(document).ready(function() {
            var options = {
                imgTag: 'img', // 图片标签类型
                width: 500, // 裁剪区域的宽度
                height: 400, // 裁剪区域的高度
                keepAspectRatio: true, // 保持宽高比
            };
            $('#upload').change(function() {
                var reader = new FileReader();
                reader.onload = function(e) {
                    options.imgSrc = e.target.result;
                    $('#image-container').empty().append('<img id="image" src="' + options.imgSrc + '">');
                    $('#image').on('load', function() {
                        $(this).cropper(options);
                    });
                }
                reader.readAsDataURL(this.files[0]);
            });
            $('#save').click(function() {
                var cropper = $('#image')[0]["cropper"].getData()[0];
                var canvas = $('#image')[0]["cropper"].getCroppedCanvas({
                    width: cropper.width,
                    height: cropper.height,
                });
                canvas.toBlob(function(blob) {
                    var formData = new FormData();
                    formData.append('croppedImage', blob, 'cropped.png');
                    $.ajax({
                        type: "POST",
                        url: "server_endpoint_here", // 替换为你的服务器端接收图片的 URL
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            console.log("图片保存成功！");
                        },
                        error: function(err) {
                            console.log("保存失败：", err);
                        }
                    });
                });
            });
        });
    </script>
</body>
</html>

说明

引入依赖：首先引入 jQuery、jQuery UI 和 CropBox.js 的 CSS 和 JS 文件。

HTML 结构：创建一个文件上传输入框、一个用于显示图片的容器和一个保存按钮。

JavaScript 逻辑：

当用户选择文件时，读取文件并将其显示在页面上。

初始化 CropBox.js 插件以启用图片裁剪功能。

当用户点击“保存”按钮时，获取裁剪后的画布并转换为 Blob 对象。

使用 FormData 将 Blob 对象发送到服务器进行保存。

FAQs

Q1: 如果我想在客户端直接下载裁剪后的图片，而不是上传到服务器，应该怎么做？

A1: 你可以使用以下代码在客户端直接下载裁剪后的图片：

canvas.toBlob(function(blob) {
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'cropped.png';
    link.click();
});

将上述代码替换原有的 AJAX 请求部分即可。

Q2: 如何调整裁剪区域的默认大小和位置？

A2: 你可以在options 对象中设置width,height,x 和y 属性来调整裁剪区域的默认大小和位置。

var options = {
    imgTag: 'img',
    width: 300, // 裁剪区域的宽度
    height: 200, // 裁剪区域的高度
    x: 50, // 裁剪区域的初始 X 坐标
    y: 50, // 裁剪区域的初始 Y 坐标
    keepAspectRatio: true,
};