Cắt và tải lên hình ảnh jquery php

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

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. -

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én
2. Tạo một tệp PHP để thay đổi kích thước và cắt hình ảnh
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én

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én

Chú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 ảnh

Chú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én

Chú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, Ajax

Chỉ 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 ảnh
• Bước 2. Tạo tệp PHP kết nối DB
• Bước 3. Tạo biểu mẫu Html để hiển thị hình ảnh cắt và thay đổi kích thước
• Bước 4. Lưu trữ hình ảnh cắt và thay đổi kích thước hình ảnh bằng 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 ảnh

Trướ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 DB

Trong 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ước

Trong 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 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

Làm cách nào để cắt hình ảnh trong khi tải lên bằng PHP?

Làm cách nào để cắt ảnh trước khi tải lên bằng cropper JS & PHP?

Làm cách nào để cắt và tải lên hình ảnh trong JavaScript?

Làm cách nào để sử dụng trình cắt xén js trong laravel?