Tải lên và Cắt hình ảnh là một tính năng của ứng dụng web cho phép người dùng cắt hình ảnh theo kích thước mong muốn trước khi tải lên. Tính năng này thường được triển khai trong phần của người dùng để quản lý hồ sơ người dùng để tải lên hình đại diện hoặc ảnh hồ sơ của người dùng sau khi cắt ảnh để hiển thị chính xác trong hồ sơ người dùng. Chức năng này có thể được triển khai ở mọi nơi với tải lên hình ảnh trong các ứng dụng web
Như trong hướng dẫn trước của chúng tôi, bạn đã học cách tải lên hình ảnh bằng jQuery, PHP và MySQL. Trong hướng dẫn này, bạn sẽ học cách cắt hình ảnh trước khi tải lên bằng jQuery và PHP
Chúng tôi sẽ sử dụng plugin Croppie jQuery cho phép cắt hình ảnh bằng cách thu phóng
Chúng tôi sẽ trình bày hướng dẫn này từng bước với live demp để duyệt qua mage và hiển thị để cắt với tính năng thu phóng và tải lên sau khi cắt hình ảnh
Ngoài ra, đọc
- Tải lên nhiều hình ảnh với jQuery, PHP và MySQL
- Xây dựng thư viện ảnh động với PHP & MySQL
Vì vậy, hãy bắt đầu mã hóa để cắt hình ảnh trước khi tải lên ví dụ bằng jQuery và PHP. Chúng tôi sẽ có cấu trúc tệp sau cho ví dụ này
- mục lục. php
- tải lên. php
- tải lên. js
Bước 1. Bao gồm plugin Bootstrap và jQuery Croppie
Vì chúng tôi sẽ xử lý thiết kế bằng plugin Bootstrap và jQuery Croppie, vì vậy chúng tôi sẽ đưa các tệp liên quan vào chỉ mục. php. Chúng tôi cũng sẽ bao gồm tải lên. js trong đó xử lý các chức năng của plugin để cắt hình ảnh và lưu trên máy chủ
Bước 2. Tạo hình ảnh tải lên và xem trước HTML
trong chỉ mục. php, chúng tôi sẽ tạo HTML để tải lên hình ảnh và xem trước hình ảnh
Crop Image and Upload using jQuery and PHP
Select Image:
Upload Image
Bước 3. Thực hiện cắt và tải lên hình ảnh
Bây giờ trong tải lên. js, chúng tôi sẽ xử lý chức năng cắt ảnh bằng chức năng plugin croppie
$image_crop = $['#upload-image'].croppie[{
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'square'
},
boundary: {
width: 300,
height: 300
}
}];
$['#images'].on['change', function [] {
var reader = new FileReader[];
reader.onload = function [e] {
$image_crop.croppie['bind', {
url: e.target.result
}].then[function[]{
console.log['jQuery bind complete'];
}];
}
reader.readAsDataURL[this.files[0]];
}];
Sau khi cắt ảnh, chúng tôi sẽ tải ảnh đã cắt lên máy chủ bằng cách gọi tải lên. php khi nhấp vào hình ảnh tải lên
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 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. -
- 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
- Tạo một tệp PHP để thay đổi kích thước và cắt hình ảnh
- 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