jquery imgareaselect 使用利用js与程序结合实现图片剪切

下面是详细讲解jquery imgareaselect 使用利用js与程序结合实现图片剪切的完整攻略，包括其特点、使用方法和示例说明。

1. jquery imgareaselect 特点

jquery imgareaselect 是基于 jquery 的图片剪切插件，具有以下特点：

• 可以在图片上选择矩形区域，以便对该区域进行剪切操作；
• 选择的区域可以通过代码获取并在后端进行处理；
• 可以对选择区域进行缩放、移动等操作；
• 支持多种选择模式，如固定大小、比例、最大最小尺寸等。

2. 使用方法

使用 jquery imgareaselect 插件的基本步骤为：

1. 加载 jquery 和 jquery imgareaselect 的 js 和 css 文件；
2. 在 HTML 中添加 img 元素，并给其添加 id；
3. 在 js 文件中使用 imgareaselect 方法对该元素进行初始化；
4. 通过代码获取选择的区域信息，并在后端进行处理。

下面我们通过示例来详细说明使用方法。

示例一

HTML

<img src="test.jpg" id="img1" />

JavaScript

$('#img1').imgAreaSelect({
    x1: 100,
    y1: 100,
    x2: 200,
    y2: 200,
    minWidth: 50,
    minHeight: 50,
    handles: true,
    onSelectEnd: function (img, selection) {
        // 获取选择的区域
        var x1 = selection.x1,
            y1 = selection.y1,
            x2 = selection.x2,
            y2 = selection.y2,
            width = selection.width,
            height = selection.height;
        // 在这里可以进行后续的处理操作，如上传、保存等。
    }
});

上述代码中，我们首先通过 $() 函数获取到 img 元素，然后使用 imgAreaSelect 方法对其进行初始化。在该方法中，我们可以传入一些参数，如选择的区域（x1, y1, x2, y2）、最小尺寸（minWidth, minHeight）、是否显示边框（handles）等。其中，onSelectEnd 参数指定了当选择完成之后执行的回调函数，该回调函数可以获取选择区域的详细信息。

示例二

HTML

<img src="test.jpg" id="img2" />

JavaScript

$('#img2').imgAreaSelect({
    handles: true,
    onSelectEnd: function(img, selection) {
        var scale = img.naturalWidth / img.width;
        var x1 = Math.round(selection.x1 * scale),
            y1 = Math.round(selection.y1 * scale),
            x2 = Math.round(selection.x2 * scale),
            y2 = Math.round(selection.y2 * scale);
        $.ajax({
            url: 'crop.php',
            type: 'POST',
            dataType: 'json',
            data: {
                x1: x1,
                y1: y1,
                x2: x2,
                y2: y2,
                width: img.naturalWidth,
                height: img.naturalHeight
            },
            success: function(res) {
                if (res.status == 'success') {
                    alert('剪切成功！');
                } else {
                    alert('剪切失败！');
                }
            },
            error: function() {
                alert('剪切失败！');
            }
        });
    }
});

上述代码中，我们首先对 img 元素进行了初始化，并指定了 onSelectEnd 回调函数。在该回调函数中，我们首先通过 img.naturalWidth 和 img.width 计算出当前图片实际尺寸与页面显示尺寸的比例，并根据比例计算出选择区域在原图中的坐标。接着，我们使用 ajax 发送 POST 请求，并传递剪切后的坐标信息，后端代码可以根据这些信息对图片进行剪切操作。最后，根据后端返回的结果进行相应的提示。

3. 总结

通过以上示例，我们可以看到 jquery imgareaselect 插件的使用方法，以及如何使用 js 和程序结合实现图片剪切操作。这个插件功能强大，使用简便，常用于头像上传、图片裁剪等场景，非常实用。