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 đăng này, bạn có thể tìm cách sử dụng thư viện Cropper.js cho hình ảnh cắt trước khi tải hình ảnh lên máy chủ bằng tập lệnh PHP. Trong hướng dẫn này, bạn có thể tìm hiểu cây trồng hình ảnh đơn giản trong khi tải lên hình ảnh bằng cách sử dụng cropper.js với PHP. Nếu bạn đang tìm kiếm hướng dẫn về cây trồng và lưu hình ảnh bằng JQuery và PHP. Sau đó, bạn đã đi đúng trang web, bởi vì trong blog này, chúng tôi có từng bước mô tả, cách sử dụng Cropper.js với PHP cho hình ảnh cắt trước khi tải hình ảnh lên máy chủ. Trong hướng dẫn này, chúng tôi đã sử dụng AJAX để tải lên hình ảnh và cho crop, chúng tôi đã sử dụng jQuery và PHP.
Trong một trong những hướng dẫn trước đây của chúng tôi về việc cắt xén hình ảnh và tải lên máy chủ và trong hướng dẫn này, chúng tôi đã sử dụng thư viện hình ảnh croppie.js tại thời điểm tải lên hình ảnh. Nhưng tại thời điểm đó, nhiều người xem đã yêu cầu chúng tôi xuất bản hướng dẫn về cách cắt hình ảnh bằng thư viện Cropper.js tại thời điểm tải lên hình ảnh bằng PHP. Đối với yêu cầu đó, chúng tôi đã xuất bản hướng dẫn này và trong đó, chúng tôi đã thực hiện cách sử dụng thư viện Cropper.js cho hình ảnh cắt một cách linh hoạt trong khi tải lên hình ảnh. Bằng cách sử dụng thư viện Cropper.js, bạn có thể thực hiện hình ảnh trực tiếp, thay đổi kích thước hình ảnh tại thời điểm tải lên hình ảnh. Trong bài đăng này, chúng tôi đã sử dụng plugin jQuery cropper.js cho cây trồng và thay đổi kích thước hình ảnh và để tải lên hình ảnh lên máy chủ ở đây, chúng tôi đã sử dụng AJAX với PHP.
Có nhiều lợi ích của việc cắt hình ảnh trước khi tải hình ảnh lên máy chủ.
- Hình ảnh cây trồng là tính năng tuyệt vời để tối ưu hóa không gian máy chủ.
- Hình ảnh cây trồng sẽ thay đổi kích thước hình ảnh theo kích thước cần thiết trong khi tải lên trên máy chủ.
- Hình ảnh cây trồng sẽ giảm kích thước hình ảnh và tối ưu hóa hình ảnh trước khi tải lên máy chủ.
- Hình ảnh cây trồng sẽ tải lên hình ảnh với chiều rộng và chiều cao cần thiết của chúng tôi.
- Hình ảnh cây trồng sẽ giảm kích thước trang web và nó sẽ giảm thời gian tải cho hình ảnh hiển thị.
- Hình ảnh cây trồng sẽ tối ưu hóa dữ liệu hình ảnh trước khi được tải lên máy chủ.
- Hình ảnh cây trồng sẽ tối ưu hóa hình ảnh để nó sẽ lưu băng thông của chúng tôi
- Hình ảnh cây trồng sẽ tạo hình thu nhỏ của hình ảnh được tải lên
Cropper.js là plugin jQuery đơn giản đã được sử dụng cho cây trồng hình ảnh với chức năng bổ sung như xem trước trực tiếp của hình ảnh tại thời điểm tải lên hình ảnh. Bằng cách sử dụng plugin này, bạn có thể nhận được chức năng như di chuyển hình ảnh, phóng to hình ảnh, xoay hình ảnh và plugin này hoàn toàn đáp ứng và nó thân thiện với thiết bị di động. Chức năng hình ảnh cây trồng, chúng ta có thể sử dụng trong chỉnh sửa hình ảnh hồ sơ, tạo album điện thoại, v.v. mà chúng ta đã tải lên máy chủ. Cuối cùng, trong hướng dẫn này, chúng tôi sẽ tích hợp Cropper.js với tập lệnh PHP để tối ưu hóa hình ảnh bằng cách cắt trước khi hình ảnh được tải lên máy chủ. Vì vậy, trong hướng dẫn này, chúng tôi sẽ tích hợp cropper.js cho hình ảnh crop trong khi tải lên hình ảnh bằng tập lệnh PHP với AJAX.
Mã nguồn
index.php
Crop Image Before Upload using CropperJS with PHP
.image_area {
position: relative;
}
img {
display: block;
max-width: 100%;
}
.preview {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
.modal-lg{
max-width: 1000px !important;
}
.overlay {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
background-color: rgba[255, 255, 255, 0.5];
overflow: hidden;
height: 0;
transition: .5s ease;
width: 100%;
}
.image_area:hover .overlay {
height: 50%;
cursor: pointer;
}
.text {
color: #333;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate[-50%, -50%];
-ms-transform: translate[-50%, -50%];
transform: translate[-50%, -50%];
text-align: center;
}
Crop Image Before Upload using CropperJS with PHP
Click to Change Profile Image
Crop Image Before Upload
Crop
Cancel
$[document].ready[function[]{
var $modal = $['#modal'];
var image = document.getElementById['sample_image'];
var cropper;
$['#upload_image'].change[function[event]{
var files = event.target.files;
var done = function[url]{
image.src = url;
$modal.modal['show'];
};
if[files && files.length > 0]
{
reader = new FileReader[];
reader.onload = function[event]
{
done[reader.result];
};
reader.readAsDataURL[files[0]];
}
}];
$modal.on['shown.bs.modal', function[] {
cropper = new Cropper[image, {
aspectRatio: 1,
viewMode: 3,
preview:'.preview'
}];
}].on['hidden.bs.modal', function[]{
cropper.destroy[];
cropper = null;
}];
$['#crop'].click[function[]{
canvas = cropper.getCroppedCanvas[{
width:400,
height:400
}];
canvas.toBlob[function[blob]{
url = URL.createObjectURL[blob];
var reader = new FileReader[];
reader.readAsDataURL[blob];
reader.onloadend = function[]{
var base64data = reader.result;
$.ajax[{
url:'upload.php',
method:'POST',
data:{image:base64data},
success:function[data]
{
$modal.modal['hide'];
$['#uploaded_image'].attr['src', data];
}
}];
};
}];
}];
}];
Tải lên.php
upload.php
Chủ Đề