Node.js – 将canvas保存为图像

我的堆栈是在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的回报。 但是，一旦我尝试从我的HTML访问/链接/img/coverpics/image-<id>.png我得到一个404.我也看不到我的Heroku目录上的任何图像。

PS CORS已启用，我正在缓冲区，但问题似乎存在，而写作。 coverpics目录存在。

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

Answer 1

好吧，Heroku提供了一个只读文件系统 ，并没有任何forms的持久性/可写文件存储。 于是我转而使用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已启用，以防止污点。