Hướng dẫn javascript crop and resize image before upload - javascript cắt và thay đổi kích thước hình ảnh trước khi tải lên

Đây là những gì tôi đã làm và nó hoạt động rất tốt.

Đầu tiên tôi đã chuyển đầu vào tệp bên ngoài biểu mẫu để nó không được gửi:

    
    ... a few more inputs ... 

Sau đó, tôi đã thay đổi chức năng uploadPhotos để chỉ xử lý việc thay đổi kích thước:

window.uploadPhotos = function(url){
    // Read in file
    var file = event.target.files[0];

    // Ensure it's an image
    if(file.type.match(/image.*/)) {
        console.log('An image has been loaded');

        // Load the image
        var reader = new FileReader();
        reader.onload = function (readerEvent) {
            var image = new Image();
            image.onload = function (imageEvent) {

                // Resize the image
                var canvas = document.createElement('canvas'),
                    max_size = 544,// TODO : pull max size from a site config
                    width = image.width,
                    height = image.height;
                if (width > height) {
                    if (width > max_size) {
                        height *= max_size / width;
                        width = max_size;
                    }
                } else {
                    if (height > max_size) {
                        width *= max_size / height;
                        height = max_size;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').drawImage(image, 0, 0, width, height);
                var dataUrl = canvas.toDataURL('image/jpeg');
                var resizedImage = dataURLToBlob(dataUrl);
                $.event.trigger({
                    type: "imageResized",
                    blob: resizedImage,
                    url: dataUrl
                });
            }
            image.src = readerEvent.target.result;
        }
        reader.readAsDataURL(file);
    }
};

Như bạn có thể thấy tôi đang sử dụng canvas.toDataURL('image/jpeg'); để thay đổi hình ảnh được thay đổi kích thước thành ADN DataURL thì tôi gọi hàm dataURLToBlob(dataUrl); để biến DataUrl thành một blob mà sau đó tôi có thể nối vào biểu mẫu. Khi blob được tạo, tôi kích hoạt một sự kiện tùy chỉnh. Đây là chức năng để tạo Blob:

/* Utility function to convert a canvas to a BLOB */
var dataURLToBlob = function(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = parts[1];

        return new Blob([raw], {type: contentType});
    }

    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;

    var uInt8Array = new Uint8Array(rawLength);

    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], {type: contentType});
}
/* End Utility function to convert a canvas to a BLOB      */

Cuối cùng, đây là người xử lý sự kiện của tôi lấy Blob từ sự kiện tùy chỉnh, nối thêm biểu mẫu và sau đó gửi nó.

/* Handle image resized events */
$(document).on("imageResized", function (event) {
    var data = new FormData($("form[id*='uploadImageForm']")[0]);
    if (event.blob && event.url) {
        data.append('image_data', event.blob);

        $.ajax({
            url: event.url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(data){
               //handle errors...
            }
        });
    }
});

Trong hướng dẫn 3 phút này, chúng tôi sử dụng CropGuide, hình ảnh JavaScript, để cắt hình ảnh trước khi chúng được tải lên máy chủ của chúng tôi mà không thực hiện bất kỳ thay đổi nào đối với mã tải lên tệp hiện có.crop images before they’re uploaded to our server without making any changes to existing file upload code.

Đối với hướng dẫn này, chúng tôi sẽ giả sử rằng một biểu mẫu có trường tải lên tệp đã được thiết lập.

Mục tiêu của chúng tôi là thêm chỉnh sửa hình ảnh vào trường này mà không phải sửa đổi bất kỳ mã hiện có nào.

Tại sao lại giúp người dùng của bạn cắt hình ảnh?

• Để tăng tốc độ tải lên hình ảnh. Một kích thước hình ảnh thấp hơn dẫn đến tải lên nhanh hơn, cải thiện độ ổn định tải lên và sử dụng đĩa ít hơn; A lower image size results in faster uploads, improved upload stability, and less disk usage;
• Để nhận được nội dung được tạo tốt hơn của người dùng. Với một số hướng dẫn người dùng có thể cắt các phần quan trọng của hình ảnh; With some guidance users can crop the important parts of an image;
• Để thấp hơn hình ảnh tải lên ma sát. Người dùng aren nhà thiết kế. Nếu một hình ảnh không phải là theo tỷ lệ khung hình mong muốn của chúng tôi hoặc lớn hơn kích thước tệp tối đa mà họ đã giành được luôn luôn biết cách khắc phục điều đó; Users aren’t designers. If an image isn’t in our desired aspect ratio or bigger than the maximum file size they won’t always know how to fix that;

Khi chúng tôi tối ưu hóa hình ảnh trước khi tải lên, chúng tôi không chỉ nhận được hình ảnh tốt hơn, chúng tôi còn nhận được nhiều hình ảnh hơn bởi vì có ít người dùng sẽ thoát khỏi biểu mẫu của chúng tôi vì thất vọng.

Sử dụng hình ảnh crop để trồng trọt

Trong hướng dẫn này, chúng tôi sẽ sử dụng CropGuide làm giải pháp cắt hình ảnh JavaScript của chúng tôi.

Cropguide giúp với:

• Thực thi tỷ lệ khung hình cây trồng;
• Yêu cầu kích thước hình ảnh tối thiểu;
• Tự động mở rộng hình ảnh lên kích thước tối đa;
• Nén hình ảnh hoặc chuyển đổi định dạng hình ảnh;
• Sửa các vấn đề định hướng hình ảnh;

Cài đặt chỉ mất một vài phút và yêu cầu hai bước:

1. Chúng tôi tạo một tài khoản cropguide

2. Chúng tôi thêm cropguide