canvas の DOM エレメント (コンテキストではない) から toBlob() を使う、というのが一番簡潔な回答です。が、これは Firefox には実装されているので すが、残念ながら Chrome にはまだ実装されていませ ん。そこで下記の方法 を使って png や jpeg など、任意の画像形式で Blob を作ることができます。 /*** canvas に絵を書くコード ***/ var type = 'image/jpeg'; // canvas から DataURL で画像を出力 var dataurl = canvas.toDataURL(type); // DataURL のデータ部分を抜き出し、Base64からバイナリに変換 var bin = atob(dataurl.split(',')[1]); // 空の Uint8Array ビューを作る var buf
![Canvas に描いた画像を png などの形式の Blob に変換する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d81fe154895a766c9f697bb86f403e98b383608/height=288;version=1;width=512/https%3A%2F%2Fblog.agektmr.com%2Fimages%2Fcover.jpg)