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

Thay đổi kích thước hình ảnh rất tốn kém về mặt tính toán và thường được thực hiện ở phía máy chủ để các tệp hình ảnh có kích thước bên phải được phân phối cho phía máy khách. Cách tiếp cận này cũng lưu dữ liệu trong khi truyền hình ảnh từ máy chủ đến máy khách.

Tuy nhiên, có một vài tình huống mà bạn có thể cần thay đổi kích thước hình ảnh hoàn toàn bằng cách sử dụng JavaScript ở phía máy khách. Ví dụ -

1. Thay đổi kích thước hình ảnh trước khi tải lên máy chủ

   Tải lên một tệp lớn trên máy chủ của bạn sẽ mất rất nhiều thời gian. Trước tiên, bạn có thể thay đổi kích thước hình ảnh trên trình duyệt và sau đó tải chúng lên để giảm thời gian tải lên và cải thiện hiệu suất ứng dụng.

2. Các biên tập viên hình ảnh phong phú làm việc trên phía khách hàng

   Một trình soạn thảo hình ảnh phong phú cung cấp kích thước hình ảnh, cắt, xoay, phóng to và thu nhỏ các khả năng thường yêu cầu thao tác hình ảnh ở phía máy khách. Tốc độ là rất quan trọng cho người dùng trong các biên tập viên này.

   Nếu người dùng đang thao túng một hình ảnh nặng, sẽ mất rất nhiều thời gian để tải xuống hình ảnh được chuyển đổi từ máy chủ. Hãy tưởng tượng điều này với các hoạt động như hoàn tác/làm lại và văn bản phức tạp và lớp phủ hình ảnh.

Thao tác hình ảnh trong JavaScript được thực hiện bằng cách sử dụng phần tử canvas. Có các thư viện như Fabric.js cung cấp các API phong phú.

Ngoài hai lý do trên, trong hầu hết các trường hợp, bạn sẽ muốn lấy các hình ảnh được thay đổi kích thước từ chính phần phụ trợ để khách hàng không phải đối phó với các nhiệm vụ xử lý nặng.

Trong bài này--

1. Trước tiên chúng ta sẽ nói về cách thực hiện thay đổi kích thước hoàn toàn trong JavaScript bằng cách sử dụng phần tử

   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);
       }
   };
   

   6.
   
2. Sau đó, chúng tôi sẽ bao gồm rất chi tiết về cách bạn có thể thay đổi kích thước, cắt và làm rất nhiều với hình ảnh bằng cách thay đổi URL hình ảnh trong thuộc tính

   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);
       }
   };
   

   7. Đây là cách ưa thích để thay đổi kích thước hình ảnh mà không làm giảm trải nghiệm người dùng theo chương trình.

   Ngoài ra, chúng tôi sẽ tìm hiểu làm thế nào bạn có thể làm điều này mà không cần thiết lập bất kỳ thư viện hoặc máy chủ phụ trợ nào.

Thay đổi kích thước hình ảnh trong JavaScript - sử dụng phần tử canvas

Phần tử HTML

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);
    }
};

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);
    }
};

Hàm

/* 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      */

drawImage(image, x, y, width, height)

Đối số đầu tiên

/* 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      */

/* 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      */

/* 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      */

Chúng ta hãy viết mã để thay đổi kích thước hình ảnh do người dùng nạp vào phía trình duyệt

/* 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      */

<html>

<body>
    <div>
        <input type="file" id="image-input" accept="image/*">
        <img id="preview"></img>
    </div>

    <script>
        let imgInput = document.getElementById('image-input');
        imgInput.addEventListener('change', function (e) {
            if (e.target.files) {
                let imageFile = e.target.files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = document.createElement("img");
                    img.onload = function (event) {
                        // Dynamically create a canvas element
                        var canvas = document.createElement("canvas");

                        // var canvas = document.getElementById("canvas");
                        var ctx = canvas.getContext("2d");

                        // Actual resizing
                        ctx.drawImage(img, 0, 0, 300, 300);

                        // Show resized image in preview element
                        var dataurl = canvas.toDataURL(imageFile.type);
                        document.getElementById("preview").src = dataurl;
                    }
                    img.src = e.target.result;
                }
                reader.readAsDataURL(imageFile);
            }
        });
    </script>
</body>

</html>

Hãy hiểu điều này trong các phần. Đầu tiên, trường Loại tệp đầu vào trong HTML

<html>
  <body>
    <div>
      <input type="file" id="image-input" accept = "image/*">
      <img id="preview"></img>
    </div>
  </body>
</html>

Bây giờ chúng ta cần đọc hình ảnh đã tải lên và tạo phần tử

/* 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      */

/* 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      */

let imgInput = document.getElementById('image-input');
imgInput.addEventListener('change', function (e) {
    if (e.target.files) {
        let imageFile = e.target.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var img = document.createElement("img");
            img.onload = function(event) {
                // Actual resizing
            }
            img.src = e.target.result;
        }
        reader.readAsDataURL(imageFile);
    }
});

Cuối cùng, hãy vẽ hình ảnh trên vải và hiển thị phần tử xem trước.

// Dynamically create a canvas element
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

// Actual resizing
ctx.drawImage(img, 0, 0, 300, 300);

// Show resized image in preview element
var dataurl = canvas.toDataURL(imageFile.type);
document.getElementById("preview").src = dataurl;

Bạn có thể nhận thấy rằng hình ảnh kích thước trông bị biến dạng trong một vài trường hợp. Đó là bởi vì chúng tôi bị buộc

/* 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      */

Tất cả điều này có thể được thực hiện trong JavaScript, vì bạn có quyền truy cập vào chiều cao ban đầu hình ảnh đầu vào (

/* 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      */

/* 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      */

Ví dụ: chúng ta có thể lắp hình ảnh đầu ra trong một thùng chứa kích thước

/* 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      */

var MAX_WIDTH = 300;
var MAX_HEIGHT = 300;

var width = img.width;
var height = img.height;

// Change the resizing logic
if (width > height) {
    if (width > MAX_WIDTH) {
        height = height * (MAX_WIDTH / width);
        width = MAX_WIDTH;
    }
} else {
    if (height > MAX_HEIGHT) {
        width = width * (MAX_HEIGHT / height);
        height = MAX_HEIGHT;
    }
}

var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);

Kiểm soát hành vi tỷ lệ hình ảnh

Hình ảnh mở rộng có thể dẫn đến các tạo tác mờ hoặc khối. Có một sự đánh đổi giữa tốc độ và chất lượng. Theo mặc định, các trình duyệt được điều chỉnh cho tốc độ tốt hơn và cung cấp các tùy chọn cấu hình tối thiểu.

Bạn có thể chơi với các thuộc tính sau để kiểm soát hiệu ứng làm mịn:

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);
    }
};

Thay đổi kích thước hình ảnh trong JavaScript - Cách không có máy chủ

ImageKit cho phép bạn điều khiển kích thước hình ảnh trực tiếp từ URL hình ảnh và nhận kích thước chính xác hoặc cây trồng bạn muốn trong thời gian thực. Bắt đầu với một hình ảnh chính duy nhất, càng lớn càng tốt và tạo nhiều biến thể từ cùng.

Ví dụ: chúng ta có thể tạo một biến thể

/* 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...
            }
        });
    }
});

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);
    }
};

Bạn có thể sử dụng URL này trực tiếp trên trang web hoặc ứng dụng của mình cho hình ảnh sản phẩm và người dùng của bạn có được hình ảnh chính xác ngay lập tức.

Nếu bạn không muốn cắt hình ảnh trong khi thay đổi kích thước, có một số chế độ cắt có thể.

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);
    }
};

Chúng tôi đã xuất bản các hướng dẫn về cách bạn có thể thực hiện những điều sau đây bằng cách sử dụng thao tác hình ảnh thời gian thực của ImageKit.

• Thay đổi kích thước hình ảnh - Thao tác chiều cao và chiều rộng cơ bản
• Cây trồng và bảo tồn tỷ lệ khung hình
• Phát hiện mặt và đối tượng
• Thêm hình mờ
• Thêm lớp phủ văn bản
• Thích ứng với kết nối Internet chậm
• Đang tải một trình giữ chỗ chất lượng thấp mờ

Bản tóm tắt

• Trong hầu hết các trường hợp, bạn không nên thực hiện thay đổi kích thước hình ảnh trong trình duyệt vì nó chậm và dẫn đến chất lượng kém. Thay vào đó, bạn nên sử dụng hình ảnh CDN như ImageKit.io để thay đổi kích thước hình ảnh bằng cách thay đổi URL hình ảnh. Hãy thử kế hoạch miễn phí mãi mãi của chúng tôi ngày hôm nay!
  
• Nếu trường hợp sử dụng của bạn yêu cầu thay đổi kích thước phía máy khách, có thể sử dụng phần tử

  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);
      }
  };
  

  6.