Hướng dẫn how to save crop image in php? - làm cách nào để lưu hình ảnh cắt trong php?

Thử nghiệm

Bạn có thể cắt hình ảnh trước khi tải lên và lưu nó trên máy chủ của bạn bằng PHP. Cắt một hình ảnh sẽ yêu cầu một thư viện jQuery gọi là & nbsp; cropper. Bạn có thể tải xuống Thư viện Cropper từ liên kết bên dưới:cropper. You can download the cropper library from the link below:

Tải xuống Thư viện Cropper

Hãy tiếp tục và tải xuống thư viện này. Bạn cũng sẽ cần jQuery cho việc này. Tất cả các tập tin cũng đã được bao gồm trong các tệp nguồn bên dưới.

Bao gồm các tập tin thư viện

Sau khi tải xuống và đặt các tệp trong dự án của bạn, bạn sẽ cần bao gồm 3 tệp. jQuery, cropper.css và cropper.js. Bạn có thể tìm thấy các tệp đó trong các tệp nguồn bên dưới:

index.php

<script src="jquery-3.3.1.min.js"></script>
<script src="cropper.js"></script>
<link rel="stylesheet" type="text/css" href="cropper.css">

<!-- Image needs to be cropped, should be displayed in an <img> tag -->
<img src="adnan-afzal.jpg" style="width: 200px;" id="image">

<!-- Initiating the library and disabling the zoom from mouse wheel and from laptop mousepad -->
<script>
    $(function () {
        $("#image").cropper({
            zoomable: false
        });
    });
</script>

<!-- If you want to remove the background and make it transparent, you can apply the following styles -->
<style>
    .cropper-crop {
        display: none;
    }
    .cropper-bg {
        background: none;
    }
</style>

Tại thời điểm này, bạn sẽ có thể cắt hình ảnh đã chọn trong thẻ. Bước tiếp theo là lưu khu vực cắt khỏi hình ảnh.

Tiết kiệm khu vực cắt hình ảnh

Trước tiên, bạn phải tạo một nút đơn giản, khi nhấp vào sẽ gửi yêu cầu AJAX với khu vực bị cắt:

<!-- A button when clicked will save the cropped area -->
<button type="button" onclick="crop();">
    Crop
</button>

<script>
function crop() {
    // Blob is a textual form of an image which will be obtained from <img> tag
    $("#image").cropper("getCroppedCanvas").toBlob(function (blob) {

        // FormData is a built-in javascript object
        var formData = new FormData();
        formData.append("croppedImage", blob);

        $.ajax({
            url: "upload.php", // name of the file which we will be creating soon
            method: "POST",
            data: formData,
            processData: false, // necessary for sending image data
            contentType: false, // necessary for sending image data
            success: function (response) {
                alert(response);
            }, error: function (xhr, status, error) {
                console.log(status, error);
            }
        });
    });
}
</script>

Bây giờ, chúng tôi chỉ cần tạo một tệp mới có tên & nbsp; upload.php & nbsp; và dán mã sau trong đó. Mã này khá đơn giản, chúng ta có thể lưu trữ hình ảnh được gửi từ AJAX bằng cách sử dụng hàm PHP tích hợp được gọi là & nbsp; Move_uploaded_file ():move_uploaded_file():

upload.php

<?php

move_uploaded_file($_FILES["croppedImage"]["tmp_name"], "Cropped image.jpg");
echo "Image has been uploaded";

Rằng nó, tiếp tục và thử cắt một hình ảnh và nhấn nút crop crop. Khu vực cắt xén của bạn sẽ được lưu dưới dạng hình ảnh cắt xén.jpg.

bài chuyển hướng

Quan điểm đăng: 3.720 3,720