Xoay hình ảnh trước khi tải lên JavaScript

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

Bạ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ụ.

• Đầu tiên, bản xem trước hiển thị của Hình ảnh đã chọn bằng JavaScript
• Thứ hai, xoay Hình ảnh theo chiều kim đồng hồ hoặc góc ngược chiều kim đồng hồ bằng jQuery
• Thứ ba, xoay hình ảnh bằng cách sử dụng góc đã cho theo độ bằng PHP
• Và cuối cùng, tải Hình ảnh đã xoay lên máy chủ

Biểu mẫu tải lên hình ảnh

Tạ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 ảnh

Xác định một phần tử HTML để xem trước Hình ảnh

• Nút bên phải xoay ảnh theo chiều kim đồng hồ
• Nút bên trái xoay Hình ảnh ngược chiều kim đồng hồ

    Left
    Right
    

Thư viện jQuery

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

• Đối tượng FileReader giúp đọc dữ liệu tệp thô của Hình ảnh bằng JavaScript.
• Khi nội dung hình ảnh thô được tải, bản xem trước hình ảnh sẽ thêm vào phần tử HTML bằng jQuery

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

Sau 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 filePreview[]  .

• Kích hoạt hàm filePreview[]  bằng cách sử dụng phương thức jQuery change[], trong sự kiện thay đổi của đầu vào tệp, 
• Hàm filePreview[]  hiển thị bản xem trước của hình ảnh đã chọn trên trang web

$["#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

• Trên sự kiện nhấp vào nút Trái/Phải,
  • Độ xoay được tính dựa trên góc đã chọn và đặt thuộc tính biến đổi để xoay thành phần hình ảnh
  • Đặt giá trị độ cho trường đầu vào xoay để sử dụng phía máy chủ

[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ủ [

    Left
    Right