Thay đổi kích thước và Cắt hình ảnh là kỹ thuật rất hữu ích và quan trọng để tiết kiệm dung lượng và băng thông, đồng thời nó cũng giảm thời gian thực hiện trang và tải trang web của bạn nhanh hơn nhiều Show
Cắt hình ảnh khi bạn muốn một phần cụ thể của hình ảnh chỉ hiển thị như khuôn mặt của bạn và hoàng hôn phía sau bạn, v.v. Vì vậy, cả hai đều là kỹ thuật rất hữu ích và quan trọng mà bạn có thể thực hiện với hình ảnh của mình. Trong hướng dẫn này, chúng ta sẽ Thay đổi kích thước và Cắt hình ảnh bằng PHP và jQuery Chắc bạn cũng thích Nén Và Thay Đổi Kích Thước Hình Ảnh Trước Khi Tải Lên Cơ Sở Dữ Liệu Bằng PHP Tham gia với hơn 27.000 thành viên trong nhóm Google của bạn và nhận các hướng dẫn mới nhất Nhận các hướng dẫn mới nhất của chúng tôi, Hướng dẫn cách thực hiện về phát triển web mỗi ngày ngay trong hộp thư đến của bạn  HÃY XEM THỬ HƯỚNG DẪN TRỰC TIẾP NÀY → Để thay đổi kích thước và cắt ảnh chỉ mất ba bước. -
Bước 1. Tạo tệp HTML và xác định đánh dấu và tập lệnh để thay đổi kích thước và cắt xénChúng tôi tạo một tệp HTML và lưu nó với tên crop. html Trước hết, bạn cần tải xuống Plugin jQuery Ui để tạo div có thể kéo được để người dùng có thể kéo div và chọn phần mong muốn của hình ảnh để cắt xén Trong bước này, chúng tôi đã tạo hai div "crop_wrapper" là nơi chứa hình ảnh và div có thể kéo được và "crop_div" là div có thể kéo được Chúng tôi đã tạo một hàm crop() lấy kích thước của hình ảnh và sau đó gửi tất cả dữ liệu sau khi gửi biểu mẫu tới do_crop. tập tin php để cắt xén. Bạn cũng có thể thích Thêm WaterMark vào hình ảnh bằng PHP Bước 2. Tạo một tệp PHP để thay đổi kích thước và cắt hình ảnhChúng tôi tạo một tệp PHP có tên do_crop. php Trong bước này, chúng tôi thay đổi kích thước và cắt hình ảnh bằng thư viện PHP GD và chúng tôi nhận được tất cả các kích thước của crop_div Trước tiên, chúng tôi tải hình ảnh từ thư mục, bạn cũng có thể tạo biểu mẫu tải lên để tải hình ảnh lên nếu không biết, chúng tôi có hướng dẫn về Cách tải hình ảnh lên và sau đó chúng tôi thay đổi kích thước hình ảnh thành 600px x 400px vì chúng tôi xác định kích thước hình ảnh là 600px x 400px trong Điều rất quan trọng là thay đổi kích thước hình ảnh với cùng kích thước hiển thị hình ảnh cho dù bạn tải hình ảnh lên hay chỉ tải từ thư mục Và sau đó chúng tôi sử dụng hàm imagecopyresampled() và sau đó chúng tôi sử dụng hàm imagejpeg() để tạo hình ảnh đã cắt và lưu nó với tên crop_image. jpg Bước 3. Tạo tệp CSS và xác định kiểu dáng cho Thay đổi kích thước và Cắt xénChúng tôi tạo một tệp CSS và lưu nó với tên crop_style. css body
{
margin:0px;
padding:0px;
}
#crop_wrapper
{
position:relative;
margin-left:150px;
margin-top:50px;
width:600px;
height:400px;
}
#crop_wrapper img
{
width:600px;
height:400px;
}
#crop_div
{
width:300px;
height:200px;
border:1px dashed white;
position:absolute;
top:0px;
box-sizing:border-box;
}
Đó là tất cả, đây là cách Thay đổi kích thước và Cắt hình ảnh bằng PHP và jQuery. Bạn có thể tùy chỉnh thêm mã này theo yêu cầu của bạn. Và xin vui lòng cho nhận xét về hướng dẫn này Tải lên và cắt hình ảnh Ajax bằng jquery croppie và PHP. Sau đây, chúng tôi sẽ hướng dẫn bạn cách cắt, thay đổi kích thước kích thước ảnh và lưu trữ vào cơ sở dữ liệu bằng jQuery croppie với ajax trong PHP Ở đây, chúng tôi sẽ sử dụng thư viện croppie jQuery để cắt và thay đổi kích thước hình ảnh trước khi tải lên cơ sở dữ liệu với ajax trong PHP Hướng dẫn này sẽ hướng dẫn bạn từng bước để tải lên crop và thay đổi kích thước bằng cách sử dụng jquery ajax trong PHP Cắt ảnh và lưu vào cơ sở dữ liệu bằng PHP Với jQuery Croppie, AjaxChỉ cần làm theo các bước đơn giản dưới đây để cắt hình ảnh, thay đổi kích thước và lưu trữ hình ảnh vào cơ sở dữ liệu trong php bằng cách sử dụng jQuery croppie và ajax
Bước 1. Tạo bảng hình ảnh cho cửa hàng Cắt và thay đổi kích thước hình ảnhTrước hết, hãy mở cơ sở dữ liệu của bạn và chạy các truy vấn sql sau để tạo bảng quốc gia, tiểu bang và thành phố vào cơ sở dữ liệu Chạy truy vấn sql sau đây để tạo bảng crop_image vào cơ sở dữ liệu của bạn -- -- Table structure for table `crop_images` -- CREATE TABLE `crop_images` ( `id` int(11) NOT NULL, `title` longblob NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Indexes for dumped tables -- -- -- Indexes for table `crop_images` -- ALTER TABLE `crop_images` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `crop_images` -- ALTER TABLE `crop_images` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT; Bước 2. Tạo tệp PHP kết nối DBTrong bước này, hãy tạo tên tệp db. php và cập nhật đoạn mã sau vào db. tập tin php <?php
$servername='localhost';
$username='root';
$password='';
$dbname = "my_db";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}
?>
Lưu ý rằng, Mã này được sử dụng để tạo kết nối cơ sở dữ liệu MySQL trong dự án PHP Bước 3. Tạo biểu mẫu Html để hiển thị hình ảnh cắt và thay đổi kích thướcTrong bước này, hãy tạo một chỉ mục. php và cập nhật mã PHP và HTML bên dưới vào chỉ mục. tập tin php Lưu ý rằng, Mã HTML này hiển thị dạng hình ảnh cắt xén và mô hình bootstrap. Bởi vì bạn có thể cắt hình ảnh và thay đổi kích thước hình ảnh trên phương thức bootstrap. Sau đó lưu trữ vào cơ sở dữ liệu bằng cách sử dụng jquery ajax Bây giờ, hãy cập nhật biểu mẫu html sau vào chỉ mục. tập tin php <html> <head> <title>Crop and Save Image using jQuery ajax and PHP</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" /> </head> <body> <div class="container mt-5"> <div class="card"> <div class="card-header"> Crop and Save Image using jQuery ajax and PHP </div> <div class="card-body"> <input type="file" name="before_crop_image" id="before_crop_image" accept="image/*" /> </div> </div> </div> </body> </html> <div id="imageModel" class="modal fade bd-example-modal-lg" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Crop & Resize Upload Image in PHP with Ajax</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-8 text-center"> <div id="image_demo" style="width:350px; margin-top:30px"></div> </div> <div class="col-md-4" style="padding-top:30px;"> <br /> <br /> <br/> <button class="btn btn-success crop_image">Save</button> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script> $(document).ready(function(){ $image_crop = $('#image_demo').croppie({ enableExif: true, viewport: { width:200, height:200, type:'square' //circle }, boundary:{ width:300, height:300 } }); $('#before_crop_image').on('change', function(){ var reader = new FileReader(); reader.onload = function (event) { $image_crop.croppie('bind', { url: event.target.result }).then(function(){ console.log('jQuery bind complete'); }); } reader.readAsDataURL(this.files[0]); $('#imageModel').modal('show'); }); $('.crop_image').click(function(event){ $image_crop.croppie('result', { type: 'canvas', size: 'viewport' }).then(function(response){ $.ajax({ url:'crop-image-store.php', type:'POST', data:{"image":response}, success:function(data){ $('#imageModel').modal('hide'); alert('Crop image has been uploaded'); } }) }); }); }); </script> Bước 4. Lưu trữ hình ảnh cắt và thay đổi kích thước hình ảnh bằng AjaxTrong bước này, tạo lại một tệp PHP mới có tên crop-image-store. php. Mã PHP này sẽ lưu trữ cắt và thay đổi kích thước hình ảnh vào bảng cơ sở dữ liệu Để cập nhật mã php và html sau vào crop-image-store. tập tin php <?php
//save crop image in php
if(isset($_POST["image"]))
{
include('db.php');
$data = $_POST["image"];
$image_array_1 = explode(";", $data);
$image_array_2 = explode(",", $image_array_1[1]);
$data = base64_decode($image_array_2[1]);
$imageName = time() . '.png';
file_put_contents($imageName, $data);
$image_file = addslashes(file_get_contents($imageName));
$query = "INSERT INTO crop_images(title) VALUES ('".$image_file."')";
$statement = $connect->prepare($query);
if($statement->execute())
{
echo 'Image save into database';
unlink($imageName);
}
}
?>
Phần kết luậnCắt, thay đổi kích thước và lưu hình ảnh bằng jquery trong hướng dẫn PHP với ajax, bạn đã học cách cắt và thay đổi kích thước hình ảnh bằng jquery croppie. Và lưu trữ hình ảnh cắt vào bảng cơ sở dữ liệu trong PHP Làm cách nào để cắt hình ảnh trong khi tải lên bằng PHP?php $ đầu ra = mảng(); . ứng dụng/json');
Làm cách nào để cắt ảnh trước khi tải lên bằng cropper JS & PHP?Bằng cách sử dụng Máy cắt. thư viện js bạn có thể thực hiện cắt hình ảnh trực tiếp, thay đổi kích thước hình ảnh tại thời điểm tải hình ảnh lên . Trong bài đăng này, chúng tôi đã sử dụng Cropper. js Plugin jQuery để Cắt và Thay đổi kích thước hình ảnh và để tải hình ảnh lên máy chủ ở đây, chúng tôi đã sử dụng Ajax với PHP.
Làm cách nào để cắt và tải lên hình ảnh trong JavaScript?Một cách phổ biến để cắt hình ảnh trong JavaScript là sử dụng phần tử HTML5 . Bước 1. Tạo Canvas trong HTML. . Bước 2. Tạo tệp JavaScript và chức năng cắt. . Bước 3. Tải hình ảnh. . Bước 4. Gọi hàm drawImage() Làm cách nào để sử dụng trình cắt xén js trong laravel?Laravel Cắt ảnh trước khi tải lên bằng Hướng dẫn về Cropper js . Bước 1. Cài đặt ứng dụng Laravel mới Bước 2. Thêm chi tiết cơ sở dữ liệu Bước 3. Tạo Migration và Model Bước 4. Thêm tuyến đường Bước 5. Tạo bộ điều khiển bằng nghệ nhân Bước 6. Tạo Chế độ xem Blade Bước 7. Tạo thư mục tải lên Bước 8. Bắt đầu phát triển máy chủ |
