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
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
[email protected]/dist/umd/popper.min.js"></script> <script src="//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script> <link rel="stylesheet" href="//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 Ajax
Trong 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ận
Cắ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