bởi Vincy. Sửa đổi lần cuối vào ngày 15 tháng 7 năm 2022.
Trong một bài viết trước, chúng tôi đã thấy mã PHP để cắt hình ảnh bằng jQuery. Trong ví dụ đó, trang đích tải một phần tử hình ảnh tĩnh được biến thành một lớp có thể cắt bằng cách sử dụng thư viện JCROP.
Sau & nbsp; xuất bản ví dụ về cây php, nhiều người đọc & nbsp; yêu cầu xuất bản một bài viết với một ví dụ để thực hiện cắt xén với các hình ảnh được tải lên động. Ở đây bạn đi, chúng ta hãy tạo ví dụ PHP để tải lên một hình ảnh và hiển thị bản xem trước của nó và kích hoạt tính năng cắt xén trên đó.cropping with the dynamically uploaded images. Here you go, let us create the PHP example to upload an image and show its preview and enable cropping feature on it.
Để làm cho mã này đơn giản hơn, chúng ta phải hợp nhất ví dụ tải lên tệp PHP và ví dụ cắt hình ảnh jQuery lại với nhau. Vì vậy, một biểu mẫu có tùy chọn tải lên tệp được sử dụng để chọn tệp hình ảnh và tải tệp nhị phân tệp lên mã PHP.
Trong tệp PHP, dữ liệu mảng $ _Files được nhận và tải lên tệp được chuyển đến mục tiêu được chỉ định. Khi tải lên thành công, bản xem trước hình ảnh được hiển thị và chức năng cắt xén được khởi tạo với tham chiếu của phần tử xem trước.
Biểu mẫu HTML với tùy chọn tải lên hình ảnh
Mã này được sử dụng để tạo biểu mẫu HTML với đầu vào tệp để cho phép người dùng chọn và tải lên tệp hình ảnh. Nếu bạn muốn tải lên hình ảnh với Ajax, thì & NBSP; Tải xuống mã nguồn từ bài viết tải lên hình ảnh PHP AJAX.
Sau khi xử lý tập lệnh tải lên hình ảnh PHP, bản xem trước hình ảnh được tải lên được hiển thị với phần tử hình ảnh HTML. Tham chiếu phần tử này được sử dụng để khởi tạo các tùy chọn thư viện JCROP.
Khởi tạo thư viện JCROP dựa trên jQuery để cho phép cắt xén
Thay vì đề cập đến phần tử hình ảnh tĩnh, JCROP được khởi tạo với hình ảnh được tải lên động. Xem trước hình ảnh được tải lên được giới thiệu & nbsp; với thuộc tính ID. ID này sau đó được sử dụng trong tập lệnh jQuery để khởi tạo các thuộc tính thư viện JCROP để gọi chức năng cắt xén. Nó cho phép tính năng cắt xén trên phần tử hình ảnh xem trước được tải động trên hình ảnh tải lên.
$[document].ready[function[]{
var size;
$['#cropbox'].Jcrop[{
aspectRatio: 1,
onSelect: function[c]{
size = {x:c.x,y:c.y,w:c.w,h:c.h};
$["#crop"].css["visibility", "visible"];
}
}];
$["#crop"].click[function[]{
var img = $["#cropbox"].attr['src'];
$["#cropped_img"].show[];
$["#cropped_img"].attr['src','image-crop.php?x='+size.x+'&y='+size.y+'&w='+size.w+'&h='+size.h+'&img='+img];
}];
}];
Tải xuống
Trở lại đầu
Trong bài viết này, tôi sẽ cho bạn biết cách tải lên hình ảnh, cắt xén và thay đổi kích thước bằng PHP và AJAX. Có rất nhiều người yêu cầu chia sẻ các bài viết về cây trồng hình ảnh và thay đổi kích thước mà không cần hộp bật lên hoặc hộp phương thức. Đôi khi các hộp bật lên tạo ra sự cố trên máy tính bảng và thiết bị di động.Image uploading, cropping, and resizing using PHP and Ajax.We have earlier post an article image upload and crop using popup box .I got a huge response from all of you guys. There are a lot of folks
who request to share articles about image crop and resizing without popup box or modal box. Sometimes popup boxes create issues on tablet and mobile devices.
Trong bài đăng này, tôi sẽ trình diễn tải lên hình ảnh và cắt xén trên cùng một trang thay vì một hộp phương thức. Chúng tôi đang hiển thị và ẩn hình ảnh xem Div dựa trên hành động của người dùng. Tôi đang sử dụng thư viện PHP GD để thay đổi kích thước hình ảnh và plugin jQuery Ajax Form để tải lên hình ảnh bằng cách sử dụng AJAX. Tôi đang sử dụng plugin
1 để cắt hình ảnh và PHP để thay đổi kích thước hình ảnh với hình ảnh được cắt.Có plugin jQuery sau đây và thư viện CSS được sử dụng trong hướng dẫn này -
- Thư viện jQuery: Thư viện cơ sở để hỗ trợ plugin jQuery khác The Base library to support other jquery plugin
- Bootstrap 3: Được sử dụng để tạo bố cục HTML tuyệt vời Used to create awesome HTML layout
- IMGAREASELECT: Sử dụng để xác định hình ảnh phối hợp và cắt xén, bạn có thể tải xuống từ đây. Use to define crop co-ordinate and cropped image, You can download from
here.
- Mẫu Ajax: Sử dụng để gửi mẫu Ajax, bạn có thể tải xuống từ đây Use to submit form Ajax manner,You can download from here
Ngoài ra kiểm tra hướng dẫn khác về cây trồng hình ảnh,
- Chức năng cây trồng hình ảnh trong hộp mô hình sử dụng PHP
- Tải lên hình ảnh, cắt và thay đổi kích thước bằng PHP, JQuery và Ajax
Ở đây, tôi đang hiển thị tệp hình ảnh
Bước 3: Hãy để tạo ra một div để tải lên và cắt hình ảnh. Let’s create a div to upload and crop image.
Upload your imageClose Crop & Save
Bước 4: Đã thêm một số mã jQuery để hiển thị hình ảnh crop Div khi nhấp vào nút
4. Added some jQuery code to show the Image Crop div on click of
jQuery['#change-pic'].live['click', function[e]{
e.preventDefault[];
jQuery['#changePic'].show[];
jQuery['#change-pic'].hide[];
}];
Mã trên sẽ hiển thị Div container hình ảnh được tải lên nơi bạn sẽ cắt và lưu hình ảnh, tôi cũng ẩn nút PIC thay đổi.change Pic button.
Bước 5: Chúng tôi sẽ sử dụng plugin biểu mẫu JQuery AJAX để gửi biểu mẫu và hiển thị hình ảnh cho quy trình trồng trọt trên trang. We will use the jQuery Ajax form plugin for form submitting and show the image for the crop process on the page.
jQuery['#photoimg'].live['change', function[]
{
jQuery["#preview-avatar-profile"].html[''];
jQuery["#preview-avatar-profile"].html['Uploading....'];
jQuery["#cropimage"].ajaxForm[
{
target: '#preview-avatar-profile',
success: function[] {
jQuery['img#photo'].imgAreaSelect[{
aspectRatio: '1:1',
onSelectEnd: getSizes,
}];
}
}].submit[];
}];
Bạn có thể nhận hình ảnh tất cả các tham số trên chức năng gọi lại
Bước 6: Đã thêm mã jQuery vào hình ảnh cắt và được gọi là Phương thức lưu
6 để lưu hình ảnh trên bộ lưu trữ đĩa cứng. Added jQuery code to cropped image and called save
________số 8
Bước 7: Chúng tôi sẽ xác định phương thức điều khiển/hành động trong
7. We will define controller/action method in
/*********************************************************************
Purpose : update image.
Parameters : null
Returns : integer
***********************************************************************/
public function changeAvatar[] {
global $current_user;
$loggedInId = $current_user->ID;
$post = isset[$_POST] ? $_POST: array[];
$max_width = "500";
$userId = isset[$post['hdn-profile-id']] ? intval[$post['hdn-profile-id']] : 0;
$path = get_theme_root[]. '\images\uploads\tmp';
$valid_formats = array["jpg", "png", "gif", "bmp","jpeg"];
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if[strlen[$name]]
{
list[$txt, $ext] = explode[".", $name];
if[in_array[$ext,$valid_formats]]
{
if[$sizegetWidth[$filePath];
$height = $this->getHeight[$filePath];
//Scale the image if it is greater than the width set above
if [$width > $max_width]{
$scale = $max_width/$width;
$uploaded = $this->resizeImage[$filePath,$width,$height,$scale];
}else{
$scale = 1;
$uploaded = $this->resizeImage[$filePath,$width,$height,$scale];
}
$res = $this->Profile->saveAvatar[array[
'userId' => isset[$userId] ? intval[$userId] : 0,
'avatar' => isset[$actual_image_name] ? $actual_image_name : '',
]];
echo "";
}
else
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
exit;
}
Bước 8: Phương thức mô hình để lưu đường dẫn hình ảnh vào cơ sở dữ liệu. Model method to save image path into database.