Dukungan toBlob() Canvas ditambahkan di Chrome 50

Paul Lewis

Elemen kanvas mendapatkan upgrade mulai Chrome 50: kini mendukung metode toBlob(). Ini adalah kabar baik bagi siapa saja yang membuat gambar di sisi klien, yang ingin -- misalnya -- menguploadnya ke server, atau menyimpannya di IndexedDB untuk digunakan di masa mendatang.

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

Menggunakan toBlob() sangat bagus, karena Anda tidak perlu memanipulasi string berenkode base64 yang Anda dapatkan dari toDataURL(), tetapi sekarang Anda dapat langsung menggunakan data biner yang dienkode. Ukurannya lebih kecil, dan cenderung lebih sesuai dengan lebih banyak kasus penggunaan daripada URI data.

Jika Anda bertanya-tanya apakah Anda dapat menggambar blob gambar ke konteks kanvas lain, jawabannya adalah -- di Firefox dan Chrome -- ya, tentu saja. Anda dapat melakukannya dengan createImageBitmap() API, yang juga tersedia di Chrome 50.