Question

我的堆栈是在Heroku上运行的Node / Express / Mongo / Jade。我正在尝试使用writeFile将画布保存为我的文件系统中的png。

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

var pl = new Playlist({
  name: req.body.playlistName,
  creatorID: req.user.oauthID,
  creatorName: req.user.name,
  description: req.body.desc,
  songs: []
});

var img = req.body.imgBase64;
var data = img.replace(/^data:image\/\w+;base64,/, "");
var buf = new Buffer(data, 'base64');
//console.log("Buffer:  " + buf);
fs.writeFile('./public/img/coverpics/image-' + pl._id + '.png', buf, function(err){
    if(err){
        console.log(err);
        res.send(500,"Something went wrong...");
    }
    else {

        pl.save(function(error){
          if(error) console.log(error);
          else console.log("PLAYLIST ADDED");
        });
        //console.log(req.body.creatorName + " --- " + req.body.playlistName);
        var redirectURI = '/playlist/' + pl._id;
        //res.send({redirect: redirectURI});
        res.send("success");
    }
});
});

问题是我发现没有错误运行并得到success作为回报。但是一旦我尝试从我的HTML访问/链接/img/coverpics/image-<id>.png，我就得到了404.而且我在Heroku目录中看不到任何图像。

P.S。 CORS已启用，我正在正确获取缓冲区，但写入时似乎存在问题。 coverpics目录存在。

编辑：更改了相关性标题。

Answer 1

好的，所以Heroku提供Read-only file system并且没有任何形式的持久/可写文件存储。所以我切换到Amazon S3进行静态存储。也因为它似乎是一个很好的做法。设置起来非常简单。

我使用knox将数据发布到AWS。

//create knox AWS client.
var AWSclient = knox.createClient({
  key: config.AWS.key,
  secret: config.AWS.secret,
  bucket: config.AWS.bucket
});

//on post save to S3
app.post('/savePlaylist', ensureAuthenticated, function(req, res){
    var pl = new Playlist({
      name: req.body.playlistName,
      creatorID: req.user.oauthID,
      creatorName: req.user.name,
      description: req.body.desc,
      songs: []
    });
    var img = req.body.imgBase64;
    var data = img.replace(/^data:image\/\w+;base64,/, "");
    var buf = new Buffer(data, 'base64');

    var re = AWSclient.put(pl._id+'.png', {
      'Content-Length': buf.length,
      'Content-Type': 'img/png'
    });
    re.on('response', function(resp){
      if(200 == resp.statusCode) {
        console.log("Uploaded to" + re.url);
        pl.coverImg = re.url; //prepare to save image url in the database
        pl.save(function(error){
          if(error) console.log(error);
          else{
             var ruri = '/playlist?id=' + pl._id;
             res.send({redirect: ruri});
          }
        });
      }
      else
        console.log("ERROR");
    });
    re.end(buf);
});

要完成，以下是我从前端发布画布数据的方法 -

var form = $('#createPLForm').serializeArray();
var canvas = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL();
$.ajax({
  type: "POST",
  url: "/savePlaylist",
  data: { 
     imgBase64: dataURL,
     playlistName: form[0].value,
     desc: form[1].value
        },
  dataType: 'json',
  success: function(data, textStatus, jqXHR){
    if(jQuery.type(data.redirect) == 'string')
        window.location = data.redirect;
    }
});

注意：如果canvas具有来自其他域的图像以防止污染，请确保已启用CORS。

Node.js - 将画布保存为图像[对于使用Amazon S3的Heroku托管应用程序]

1 个答案: