Chrome 50 中新增對 Canvas toBlob() 的支援

Paul Lewis

自 Chrome 50 版起,畫布元素將進行升級:現已支援 toBlob() 方法!如果使用者想要在用戶端產生圖片,並想要將其上傳至伺服器或儲存在索引資料庫中,那麼這是個好消息。

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

使用 toBlob() 是很棒的做法,因為您現在可以直接使用經過編碼的二進位資料,而不必操控從 toDataURL() 取得的 Base64 編碼字串。這個容器較小,且比資料 URI 的用途更多。

如果您想知道是否可以將圖片 blob 繪製到其他畫布環境,答案是:在 Firefox 和 Chrome 中,當然沒問題!您也可以使用 createImageBitmap() API,這項 API 也已導入 Chrome 50 版。