Canvas.toBlob：Google Chrome 50和Firefox中Canvas的新功能

canvas元素将在即将面世的Chrome 50上进行升级：它现在支持toBlob()方法。

对于任何在客户端生成图像, 将其上传到服务器或存储在IndexedDB中以供将来使用的人来说, 这都是一个好消息。

使用toBlob()是一个很好的升级, 因为你现在可以直接使用编码的二进制数据, 而不是操作从toDataURL()获得的base64编码的字符串。它比数据URI更小, 并且”倾向于适应更多用例”。

你可以使用createImageBitmap API将绘图事件Blob绘制到另一个画布上下文, Chrome 50也将提供该API。

如何使用

toBlob方法是异步的, 因此需要一个函数作为第一个参数。此函数接收blob元素作为第一个参数：

<canvas id="canvas"  width="200" height="200" style="border:1px solid #000000;"><input type="button" value="Send Image to server" id="send"/>

<script>
function imageToServer(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);
}

window.onload = function(){
  document.getElementById("send").addEventListener("click", function(){
      var canvas = document.getElementById("canvas");
      imageToServer(canvas, "/a-service-to-process-the-image");
  }, false);
};

</script>

先前的代码将生成图像Blob, 该图像将被发送到将处理该Blob的url服务。

重要提示：你可以使用Chrome Canary测试此功能, 因为最新的Chrome版本是49, 直到该日期为止, 并且此功能仅适用于Chrome 50。