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

Question

我的堆栈是在 Heroku 上运行的 Node/Express/Mongo/Jade。我正在尝试使用 writeFile 将 Canvas 另存为 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作为返回。但是一旦我尝试访问/链接 /img/coverpics/image-<id>.png从我的 HTML 中，我收到 404。此外，我在 Heroku 目录中看不到任何图像。

附: 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);
});

为了完整起见，以下是我从前端发布 Canvas 数据的方法 -

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，以防止污染。