自 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 版。