JavaScript Load Image Library

1. Giới thiệu

Trong dự án hiện tại mình đang làm có rất nhiều tác vụ cho phép người dùng đăng ảnh từ smartphone. Một trong các vấn đề gặp phải khi lập trình các tác vụ đó là:

Thời gian upload ảnh lên server phải chấp nhận được (nhỏ hơn 3s)
Ảnh thu được phải được resize và crop
Ảnh phải được xoay đúng chiều (Vấn đề này rất hay gặp phải khi bạn upload ảnh từ smartphone lên mà ảnh lại bị ngược)

Sau một thời gian tìm hiểu thì mình phát hiện một thư viện giúp xử lý các tác vụ đó ở phía client side rất hữu ích có tên là JavaScript-Load-Image

Github: https://github.com/blueimp/JavaScript-Load-Image

2. Hướng dẫn sử dụng

Trước hết ta cần cài đặt thư viện, có 2 cách để làm điều này:

Thêm vào file thư viện đã được combined đầy đủ chức năng.

<script src="js/load-image.all.min.js"></script>

Hoặc chỉ thêm các components bạn cần:

<script src="js/load-image.js"></script>
<script src="js/load-image-ios.js"></script>
<script src="js/load-image-orientation.js"></script>
<script src="js/load-image-meta.js"></script>
<script src="js/load-image-exif.js"></script>
<script src="js/load-image-exif-map.js"></script>

2.1. Load thumbnail ảnh

Để load thumbnail ảnh sau khi select bạn có thể tham khảo đoạn code sau:

document.getElementById('file-input').onchange = function (e) {
    loadImage(
        e.target.files[0],
        function (img) {
            document.body.appendChild(img);
        },
        {maxWidth: 600} // Options
    );
};

Kết quả:

2.2. Thay đổi kích thước ảnh

Chúng ta chỉ sử dụng chức năng này với ảnh canvas

var scaledImage = loadImage.scale(
    img,
    {maxWidth: 600}
);

2.3. Load, rotate, resize nhiều ảnh từ multi-select


function loadImageFunc(file, options) {
    return function() {
        loadImage.parseMetaData(file, function(data) {
            if (data.exif) {
                options.orientation = data.exif.get('Orientation');
            }
            loadImage(
                file,
                function(img) {
                    if (img.src || img instanceof HTMLCanvasElement) {
                        // Do something here ...
                        var data = img.toDataURL();
                    }
                },
                options
            );
        });
    };
}

document.getElementById('file-input').onchange = function (e) {
    var files = e.target.files;
    var functions = [];
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (!file.type.match('image')) continue;
        var options = {
            canvas: true
        };
        functions[i] = loadImageOrientation(file, options);
    }
    for (var i = 0; i < files.length; i++) {
        functions[i]();
    }
});

3. Options

Ngoài ra thư viện còn cùng cấp cho chúng ta các options:

maxWidth: Quy định độ rộng tối đa của img/canvas element.
maxHeight: Quy định độ cao tối đa của img/canvas element.
minWidth: Quy định độ rộng tối thiểu của img/canvas element.
minHeight: Quy định độ cao tối thiểu của the img/canvas element.
sourceWidth: Quy định độ rộng của canvas.
sourceHeight: Quy định độ cao của canvas.
aspectRatio: Crop ảnh theo tỷ lệ (e.g. 16/9). Cần set crop: true khi sử dụng feature này.
crop: Crop ảnh theo maxWidth/maxHeight
orientation: Cho phép xoay ảnh theo thông số trong EXIF orientation.
canvas: Trả về ảnh ở định dạng canvas nếu được set là true.

JavaScript