Resize ảnh với HTML5 FileReader

Khi lập trình web, các vấn đề liên quan đến hình ảnh được sử dụng thường xuyên, ví dụ upload hình ảnh sản phẩm, banner, logo….

Từ đây nảy sinh vài vấn đề như: muốn thấy hình ảnh đại diện ngay khi chọn file. Resize hình ảnh để tiết kiệm dung lượng…. Trước khi HTML5 ra đời, chúng ta thường hay giải quyết mọi thứ trên server, tức là upload ảnh lên server, sau đó xử lý. VD: dùng ajax để upload ảnh lên server, sau đó trả về ảnh đại diện…. Điều này dẫn đến tốn thời gian xử lý cho máy chủ, hoặc file lớn, mạng chậm thì user phải chờ đợi rất lâu.

Thật may mắn khi HTML5 ra đời, nó giúp chúng ta cả 2 việc trên luôn. Đó là preview (xem trước) hình ảnh ngay khi vừa chọn xong, đồng thời resize ảnh luôn ngay trên trình duyệt. Sau đó chúng ta chỉ việc upload mã base64 này lên server, và convert lại thành hình ảnh là xong, hoặc lưu luôn base64 vào database cũng ok.

HTML sử dụng API FileReader, nó có thể đọc file ảnh, file txt, khá là thú vị.

Code chọn ảnh xong hiển thị ảnh đại diện

<br/>

Code javascript

$(document).ready(function() {

$(‘#imageFile’).change(function(evt) {

var files = evt.target.files;

var file = files[0];

if (file) {

var reader = new FileReader();

reader.onload = function(e) {

document.getElementById(‘preview’).src = e.target.result;

};

reader.readAsDataURL(file);

}

});

Các bạn chú ý, có sử dụng jQuery

Code resize hình ảnh

<br/>

Code javascript

function ResizeImage() {

if (window.File && window.FileReader && window.FileList && window.Blob) {

var filesToUploads = document.getElementById(‘imageFile’).files;

var file = filesToUploads[0];

if (file) {

var reader = new FileReader();

// Set the image once loaded into file reader

reader.onload = function(e) {

var img = document.createElement(“img”);

img.src = e.target.result;

var canvas = document.createElement(“canvas”);

var ctx = canvas.getContext(“2d”);

ctx.drawImage(img, 0, 0);

var MAX_WIDTH = 400;

var MAX_HEIGHT = 400;

var width = img.width;

var height = img.height;

if (width > height) {

if (width > MAX_WIDTH) {

height *= MAX_WIDTH / width;

width = MAX_WIDTH;

}

} else {

if (height > MAX_HEIGHT) {

width *= MAX_HEIGHT / height;

height = MAX_HEIGHT;

}

canvas.width = width;

canvas.height = height;

var ctx = canvas.getContext(“2d”);

ctx.drawImage(img, 0, 0, width, height);

dataurl = canvas.toDataURL(file.type);

document.getElementById(‘output’).src = dataurl;

}

reader.readAsDataURL(file);

}

} else {

alert(‘The File APIs are not fully supported in this browser.’);

}

See the Pen Resize Image with HTML5 File Reader by tuanitpro (@tuanitpro) on CodePen.

Chúc các bạn thành công.