Xoay hình ảnh trước khi tải lên JavaScript
Hôm nay tôi sẽ chia sẻ đoạn mã nhỏ mà tôi đã tạo hôm nay để cho phép người dùng chỉnh sửa/cắt/xoay hình ảnh trước khi tải chúng lên trang web Show
Tôi đang sử dụng Vuetify với các Biểu tượng Vật liệu trong dự án của mình và cho rằng nhiều bạn cũng sử dụng nó vì nó là thứ phổ biến nhất Điểm thú vị nhất trong hướng dẫn này là, Hình ảnh đã chỉnh sửa sẽ đơn giản là Đối tượng tệp HTML, không giống như các giải pháp khác hiện có trên internet trả về chuỗi bash hoặc blob, v.v., nơi bạn phải sửa đổi logic phụ trợ của mình vì vậy trong trường hợp của chúng tôi, nó sẽ hoàn toàn tương thích với logic tải lên API phụ trợ hiện có khi nó trả về Đối tượng tệp mặc định Đầu tiên Cài đặt phụ thuộc cần thiết để chỉnh sửa hình ảnh Cài đặt________số 8 Thứ hai, tạo một thành phần có tên AvatarUpload trong thư mục thành phần hoặc một nơi nào khác mà bạn cảm thấy thoải mái Vì vậy, iOS có một tính năng thú vị khi sử dụng API FileReader để lưu trữ hình ảnh theo hướng mặc định bất kể hình ảnh được chụp như thế nào, do đó, hình ảnh dọc được lưu trữ ở chế độ ngang, e. g Hướng "thực tế" được lưu trữ trong dữ liệu Exif đính kèm với hình ảnh. Điều này có nghĩa là nhà phát triển phải thực hiện thêm một bước để hiển thị hình ảnh theo đúng hướng Có các thư viện để thao tác hoặc xóa dữ liệu Exif (xem e. g. này), nhưng tôi đang tìm kiếm một cách đơn giản để thay đổi kích thước và xoay hình ảnh từ iOS (tôi. e. iPhone) mà không cần sử dụng thư viện. Tôi đã đưa ra những điều dưới đây (xem ví dụ hoạt động tại đây). Điều này giả sử với chiều rộng khung nhìn nhỏ hơn 400px, hình ảnh cần được xoay. Nó cũng thay đổi kích thước hình ảnh thành 800 × 600, phù hợp với các ứng dụng không cần độ phân giải đầy đủ mà iPhone hiện đại cung cấp. Tất nhiên, bạn có thể thực hiện kiểm tra mạnh mẽ hơn về hệ điều hành, trình duyệt và/hoặc xem kích thước cổng Xoay hình ảnh trước khi tải lên cho phép người dùng sửa căn chỉnh ảnh khi tải hình ảnh lên máy chủ. Do đó, người dùng có thể xem trước hình ảnh và sửa hướng trước khi tải tệp lên với sự trợ giúp của tính năng này. Tóm lại, chức năng Xoay ảnh rất hữu ích khi bạn muốn xem hướng ảnh và xoay ảnh trước khi tải lên. BÀI LIÊN QUAN
Thích Hệ thống xếp hạng không thích với jQuery, Ajax và PHPHệ thống xếp hạng sao với jQuery, Ajax, PHP và MySQLBạn có thể nhanh chóng triển khai chức năng Xem trước hình ảnh trước khi tải lên và xoay chức năng phần tử hình ảnh bằng cách sử dụng jQuery. Bạn có thể xoay Hình ảnh theo một góc nhất định và tải Hình ảnh lên máy chủ bằng PHP. Với sự trợ giúp của hướng dẫn này, chúng tôi sẽ giải thích cho bạn cách xem trước Hình ảnh bằng jQuery và xoay Hình ảnh trước khi tải lên máy chủ bằng PHP. Chức năng sau sẽ được hợp nhất thành tập lệnh xoay hình ví dụ.
Biểu mẫu tải lên hình ảnhTạo biểu mẫu HTML với trường nhập tệp (đối với tệp hình ảnh được chọn), đầu vào ẩn (để chỉ định độ xoay) và nút gửi Phần tử HTML để xem trước hình ảnhXác định một phần tử HTML để xem trước Hình ảnh
Thư viện jQueryChúng ta có thể sử dụng jQuery để thêm, xóa và xoay các thành phần hình ảnh, vì vậy trước tiên hãy xem thư viện jQuery XEM THÊM. Tải lên tệp Ajax bằng jQuery và PHP Đọc dữ liệu tệp bằng JavaScript.filePreview() là một hàm JavaScript tùy chỉnh tạo bản xem trước của Hình ảnh
function filePreview(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#imgPreview + img').remove(); $('#imgPreview').after(''); }; reader.readAsDataURL(input.files[0]); $('.img-preview').show(); }else{ $('#imgPreview + img').remove(); $('.img-preview').hide(); } } Xem trước hình ảnh đã chọnSau khi chọn tệp hình ảnh, bản xem trước xuất hiện bên dưới thành phần được chỉ định bằng cách sử dụng hàm
$("#file").change(function (){ // Image preview filePreview(this); }); Xoay hình ảnh bằng jQueryĐoạn mã sau giúp xoay hình ảnh bằng cách thay đổi thuộc tính biến đổi của phần tử bằng jQuery
(function() { var rotation = 0; $("#rright").click(function() { rotation = (rotation -90) % 360; $(".pic-view").css({'transform': 'rotate('+rotation+'deg)'}); if(rotation != 0){ $(".pic-view").css({'width': '300px', 'height': '300px'}); }else{ $(".pic-view").css({'width': '100%', 'height': '300px'}); } $('#rotation').val(rotation); }); $("#rleft").click(function() { rotation = (rotation + 90) % 360; $(".pic-view").css({'transform': 'rotate('+rotation+'deg)'}); if(rotation != 0){ $(".pic-view").css({'width': '300px', 'height': '300px'}); }else{ $(".pic-view").css({'width': '100%', 'height': '300px'}); } $('#rotation').val(rotation); }); }); XEM THÊM. Tải lên nhiều hình ảnh và lưu trữ trong cơ sở dữ liệu bằng PHP và MySQL Xoay và tải tệp lên máy chủSau khi gửi biểu mẫu, tệp đã chọn sẽ được gửi đến tập lệnh phía máy chủ (
File has been uploaded successfully'; echo ''; }else{ echo ' Phần kết luậnĐầu tiên, mã ví dụ của chúng tôi sẽ giúp bạn xoay hình ảnh trước khi tải nó lên máy chủ bằng PHP. Thứ hai, tính năng xem trước hình ảnh giúp quá trình tải lên hình ảnh dễ tiếp cận hơn. Vì vậy, tùy chọn thay đổi hướng hình ảnh nâng cao giá trị bổ sung cho chức năng tải lên hình ảnh. Và cuối cùng, mã ví dụ của chúng tôi cung cấp một cách dễ dàng để xoay Hình ảnh ở phía máy khách bằng thuộc tính CSS và tải hình ảnh đã xoay lên máy chủ bằng PHP. Do đó, bạn có thể nhanh chóng cải thiện chức năng của Xem trước và |