Canvas.toDataURL()→node.jsでBase64デコード→ファイル保存などのやり方 #JavaScript

例えばファイルをアップロードする時、Canvasに描画していいサイズにしてからサーバに送りたい事があると思います。
その場合、CanvasではtoDataURL()でBase64エンコードされたpng|jpegデータが得られるため、これをサーバに送って処理することで画像のアップロードができるわけです。

で、そのサーバ側がnode.jsの時にうまくBase64デコードできなかったのでまとめ。

クライアント側サンプル

こんな感じのソースで

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
</head>
<body>
<div style="width:200px;height:200px;overflow:hidden;border-radius:10px;background-color:gray;">
<canvas id="canvas" width="25" height="25" style="width:200px;height:200px;"></canvas>
</div>
<div id="img"></div>

<script>
var cv = document.getElementById( "canvas" );
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "red";
ctx.fillRect(100, 100, 200, 200);
document.getElementById( 'img' ).textContent = cv.toDataURL('image/jpeg');
</script>

</body>
</html>

こんな感じのデータが取得できるはず。

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAZABkDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8qqKKKACiiigAooooAKKKKAP/2Q==

これをサーバ側に渡したと仮定します。

サーバ側サンプル

// データを受け取って格納。
// data:image/jpeg;base64,というデータはBase64ではなくゴミなので排除する。
var data = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAA...省略...KKKKAP/2Q=='.split( ',' );

// Base64のデータのみが入っている。
var b64img = data[ 1 ];

// npm i urlsafe-base64 でインストールしたモジュール。
var base64 = require('urlsafe-base64');
// これでBase64デコードするとimgにバイナリデータが格納される。
var img = base64.decode( b64img );

// npm i fs でインストールしたモジュール。
var fs = require('fs');
// 試しにファイルをsample.jpgにして保存。Canvasではjpeg指定でBase64エンコードしている。
fs.writeFile('sample.jpg', img, function (err) {
    console.log(err);
});

これで正常に画像がアップロードされたはず。

Base64はモジュールによって全く違う結果になるので、闇はかなり深い……。