JQuery PHP图片在线裁剪实例

下面就为大家详细讲解如何实现“JQuery PHP图片在线裁剪”。

1. 简介

“JQuery PHP图片在线裁剪”是一种在网页上对图片进行实时裁剪的方法。通过该方法，用户可以自由选择需要裁剪的部分，并实时在网页上预览裁剪效果。本攻略将介绍如何通过JQuery和PHP来实现这一功能。

2. 准备工作

在开始实现“JQuery PHP图片在线裁剪”之前，我们需要先准备好一些必要的工具和文件。

首先，请确保您已经安装了JQuery库。如果您还没有安装JQuery库，您可以通过以下方式进行安装：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

其次，我们还需要准备一个用于上传图片的表单，代码如下：

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="image_file">
    <input type="submit" value="上传">
</form>

上述表单用于上传图片，其中的“upload.php”文件用于接收上传的图片，并进行后续的裁剪操作。

3. 编写JQuery代码

接下来，我们需要编写JQuery代码，以便实现图片在线裁剪的功能。

首先，我们需要在页面中引入JQuery库：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

然后，在页面加载完成后，我们需要给上传的图片添加一个change事件，在事件触发时，选择需要裁剪的区域：

$(document).ready(function() {
    $('#image_file').on('change', function() {
        var file = this.files[0];
        if (file) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onloadend = function(event) {
                var image = new Image();
                image.src = event.target.result;
                image.onload = function() {
                    var canvas = document.createElement('canvas');
                    canvas.width = 600;
                    canvas.height = 600 / image.width * image.height;
                    var ctx = canvas.getContext('2d');
                    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
                    $(canvas).cropper({
                        aspectRatio: 1 / 1,
                        viewMode: 1,
                        background: false,
                        center: false,
                        zoomable: false,
                        crop: function(event) {}
                    });
                };
            };
        }
    });
});

上述代码用于读取上传的图片，然后创建一个Canvas对象，将图片绘制到Canvas上，并使用原生的JS library来裁剪图片。

其中，(canvas.width, canvas.height)指定了Canvas的大小，$(canvas).cropper用于将Canvas对象转换成裁剪区域。aspectRatio规定了裁剪区域的长宽比，viewMode指定了裁剪区域的大小和位置，background指定了裁剪区域的背景颜色，center和zoomable是其他可选属性。其中，crop回调函数用于在裁剪区域发生变化时触发。

4. 编写PHP代码

接下来，我们需要编写PHP代码，以便对用户选择的图片进行裁剪，并将裁剪后的图片保存到服务器。

<?php
if (count($_FILES) > 0) {  // 判断是否上传成功
    $file = $_FILES['file']['tmp_name'];
    $image = imagecreatefromjpeg($file);  // 创建原图像
    $ratio = $_POST['size'] / $_POST['size'];
    $width = $_POST['size'];
    $height = $_POST['size'];
    $x = $_POST['x'];
    $y = $_POST['y'];
    $new = imagecreatetruecolor($width, $height); // 创建新图像
    imagecopyresampled($new, $image, 0, 0, $x, $y, $width, $height, $width * $ratio, $height * $ratio); // 裁剪原图
    header('Content-type: image/jpeg'); // 输出图片
    imagejpeg($new);
}
?>

上述PHP代码用于根据用户选择的裁剪区域对图片进行裁剪，并将裁剪后的图片输出到浏览器中。其中，$_POST['x']和$_POST['y']是用户选择的裁剪区域的左上角坐标，$_POST['size']是用户选择的裁剪区域的大小。

5. 示例说明

以下是一个示例，展示了如何使用“JQuery PHP图片在线裁剪”功能来实现图片的裁剪：

<!DOCTYPE html>
<html>
<head>
    <title>JQuery PHP图片在线裁剪示例</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.js"></script>
</head>
<body>
    <form action="crop.php" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="image_file">
        <input type="hidden" name="x" id="x">
        <input type="hidden" name="y" id="y">
        <input type="hidden" name="size" id="size">
        <input type="submit" value="裁剪">
    </form>
    <div id="image_preview"></div>

    <script>
        $(document).ready(function() {
            $('#image_file').on('change', function() {
                var file = this.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onloadend = function(event) {
                        var image = new Image();
                        image.src = event.target.result;
                        image.onload = function() {
                            var canvas = document.createElement('canvas');
                            canvas.width = 600;
                            canvas.height = 600 / image.width * image.height;
                            var ctx = canvas.getContext('2d');
                            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
                            $(canvas).cropper({
                                aspectRatio: 1 / 1,
                                viewMode: 1,
                                background: false,
                                center: false,
                                zoomable: false,
                                crop: function(event) {
                                    $('#x').val(event.x);
                                    $('#y').val(event.y);
                                    $('#size').val(event.width);
                                    $('#image_preview').empty().append($('<img>').attr('src', canvas.toDataURL('image/jpeg')));
                                }
                            });
                        };
                    };
                }
            });
        });
    </script>
</body>
</html>

上述代码中，用户可以在浏览器中选择需要上传的图片，然后选择需要裁剪的区域，并点击“裁剪”按钮。裁剪后的图片将会被提交到服务器端，并进行保存。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery PHP图片在线裁剪实例 - Python技术站