[英]Node.js - Saving canvas as an image [for Heroku hosted apps using Amazon S3]
My stack is Node/Express/Mongo/Jade running on Heroku. 我的堆栈是在Heroku上运行的Node / Express / Mongo / Jade。 I am trying to save a canvas as a png in my filesystem using writeFile.
我试图使用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");
}
});
});
The problem is that I see no error running this and get success
in return. 问题是我看不到运行此错误并获得
success
。 But once I try to access/link /img/coverpics/image-<id>.png
from my HTML I get a 404. Also I cannot see any image on my Heroku directory. 但是,一旦我尝试从HTML访问/链接
/img/coverpics/image-<id>.png
,我就会得到404。此外,我在Heroku目录中也看不到任何图像。
ps CORS is enabled and I am getting the buffer properly but the problem seems to exist while writing. ps启用了CORS,并且我可以正确获取缓冲区,但是写入时似乎存在问题。 The
coverpics
directory exists. coverpics
目录存在。
EDIT: Changed title for relevance. 编辑:更改标题的相关性。
Ok so Heroku provides a Read-only file system and doesn't have any form of persistent/writeable file storage. 好的,因此Heroku提供了一个只读文件系统 ,并且没有任何形式的持久性/可写文件存储。 So I switched to Amazon S3 for static storage.
因此,我切换到Amazon S3进行静态存储。 Also because it seemed to be a good practice.
也因为这似乎是一个好习惯。 It was surprisingly easy to setup.
它非常容易设置。
I used knox for posting the data to AWS. 我使用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);
});
To be complete, here is how I post the canvas data from the frontend - 为了完整起见,这是我从前端发布画布数据的方式-
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;
}
});
Note: Make sure CORS is enabled if canvas has images from other domains to prevent tainting. 注意:如果画布上有来自其他域的图像,请确保启用了CORS,以防止变色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.