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

我的堆栈是在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中访问/link

/img/coverpics/image-.png

，我就会得到一个404。我在Heroku目录上也看不到任何图像

p、 s.CORS已启用，我正在正确获取缓冲区，但在编写时似乎存在问题。

coverpics

目录已存在

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

好的，这样Heroku就提供了一个可编辑的文件，并且没有任何形式的持久/可写文件存储。所以我切换到AmazonS3进行静态存储。也因为这似乎是一个很好的做法。设置起来非常容易

我用于将数据发布到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;
    }
});

---

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

可能是在保存操作完成之前重定向？如果是异步的，您应该将重定向放在

pl.save

中。

公共

目录和此脚本是否在同一目录中？如果是这样的话，你可以试着写

\uu dirname+'/public/img/coverpics/image-'+pl.\u id+'.png'

。是的。我尝试添加

\uuu dirname

，但仍然看不到图像。还尝试将重定向放置在

pl.save

下，但我不明白这有什么关系，因为它已经在

writeFile

@mscdexOk的回调中，所以显然Heroku不提供永久存储，所以您可能希望将文件存储在其他位置，例如S3。假设你可以读/写你的dyno，直到它重新启动，但Heroku网站上的其他信息说它是只读的。我不知道除了使用S3或类似的工具之外还有什么建议。是的，我刚刚读过。我将把它保存到

/tmp

目录中，然后将它上传到S3，看看是否工作正常。