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

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

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() là một cách tuyệt vời, vì thay vì thao tác với chuỗi mã hoá base64 mà bạn nhận được từ toDataURL(), giờ đây, bạn có thể làm việc trực tiếp với dữ liệu nhị phân được mã hoá. Kích thước 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 so với URI dữ liệu.

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