Canvas.toBlob（Google Chrome 50和Firefox中Canvas的新功能） _Canvas.toBlob

canvas元素将在即将面世的Chrome 50上进行升级：它现在支持toBlob()方法。
对于任何在客户端生成图像, 将其上传到服务器或存储在IndexedDB中以供将来使用的人来说, 这都是一个好消息。
【Canvas.toBlob（Google Chrome 50和Firefox中Canvas的新功能）】使用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="http://www.srcmini.com/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服务。