Đã thêm tính năng hỗ trợ Canvas toBlob() trong Chrome 50

Paul Lewis

Kể từ Chrome 50, phần tử canvas sẽ được nâng cấp: phần tử này hiện hỗ trợ phương thức toBlob()! Đây là tin vui cho những ai tạo hình ảnh ở phía máy khách, những người muốn – giả sử – tải hình ảnh lên máy chủ hoặc lưu trữ hình ảnh trong IndexedDB để sử dụng sau này.

function sendImageToServer (canvas, url) {

    function onBlob (blob) {
    var request = new XMLHttpRequest();
    request.open('POST', url);
    request.onload = function (evt) {
        // Blob sent to server.
    }

    request.send(blob);
    }

    canvas.toBlob(onBlob);
}

Việc sử dụng toBlob() rất tuyệt vời vì thay vì thao tác với chuỗi được mã hoá base64 mà bạn nhận được từ toDataURL(), giờ đây, bạn có thể trực tiếp xử lý dữ liệu nhị phân đã mã hoá. URI này nhỏ hơn và có xu hướng phù hợp với nhiều trường hợp sử dụng hơn URI dữ liệu.

Nếu bạn đang thắc mắc liệu có thể vẽ các blob hình ảnh vào một ngữ cảnh canvas khác hay không, thì câu trả lời là có, hoàn toàn có thể! Bạn có thể thực hiện việc này bằng API createImageBitmap(). API này cũng sẽ ra mắt trong Chrome 50.