0

base64 でエンコードされたデータを canvas 要素から Express ハンドラに渡し、データを png ファイルに保存します

以下の ajax 呼び出しで contentType を何に設定すればよいですか? （デフォルトを使用すると、つまり x-www-form-urlencoded ではなく、開かないpngファイルが得られます）

$("#save").click(function(){
         var canv = document.getElementById('imageView');
         var canvData = canv.toDataURL('image/png');
       console.log("the type is " + typeof canvData);

          $.ajax({

          type: "POST",
          url: '/upload',
          data: canvData,
          contentType: '???', 
          success: function(data){

            console.log(data);

          }         
         });



      });

完全を期すために、私のエクスプレスハンドラーは次のとおりです。

// insert an image
function objToString (obj) {
    var str = '';
    for (var p in obj) {
        if (obj.hasOwnProperty(p)) {
            str += p + '::' + obj[p] + '\n';
        }
    }
    return str;
}
var fs = require('fs');

app.post('/upload', function(req, res){



    var image = req.body;
    image = objToString(image);
    var noHeader = image.substring(image.indexOf(',') + 1);
    var decoded = new Buffer(noHeader, 'base64');

    fs.writeFile('testfile.png', decoded, function(err){

        res.send("without header " + noHeader + "decoded " + decoded);

    });

});
4

1 に答える 1

1

取得するデータ URL は、次のような base64 文字列です。

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY....

仕様では、データを生の PNG として直接取得するためのキャンバス APIのtoBlob メソッドについて言及しています。ただし、最新版の Chrome にはまだ実装されていないため、そのままでは使用しません。

生の PNG データを取得する (したがってimage/pngContent-Type を使用する) 場合は、このtoBlob polyfillを使用できます。

編集:コードを再確認した後、データ URL を JSON として送信します。

クライアントで:

$.ajax({
    url: '/api/1/activities/' + self.model.id + '/attachments/' + fileName,
    type: 'PUT',
    contentType: 'application/json',
    dataType: 'json',
    data: JSON.stringify({data: canv.toDataURL('image/png'}),
    success: function () { ... }
});

サーバー内:

function parseDataURL(body) {
  var match = /data:([^;]+);base64,(.*)/.exec(body);
  if(!match)
    return null;

  return {
    contentType: match[1],
    data: new Buffer(match[2], 'base64')
  };
}

app.post('/upload', function (req, res) {
  var upload = parseDataURL(req.body.data);
  ...
});
于 2013-02-01T08:40:03.030 に答える