75326
Question:
I have a simple server which has this method
app.post('/', function (req, res) {
res.sendfile(path.resolve(req.files.image.path));
});
How do I get data, on client side in Image object? this is my ajax.success method,at least what i tried...
success: function (res) {
console.log(res);
var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
ctx.drawImage(img,0,0);
}
img.src=res
}
Really looking for answer already for 2 days... tried a lot of ways, but none worked. I am not even sure what I receive from server - is it bytes array?
<strong>SOLUTION:</strong> so, i figured out that post request does not need to send file back, Image.src sends its own get request to server
app.post('/', function (req, res) {
res.send(path.basename(req.files.image.path));
});
/* serves all the static files */
app.get(/^(.+)$/, function(req, res){
console.log('static file request : ' + req.params);
res.sendfile( __dirname + req.params[0]);
});
client:
success: function (res) {
var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
console.log(res);
img.onload = function () {
ctx.drawImage(img,0,0);
}
img.src="/uploads/"+res;
}
Answer1:You are trying to set the src attribute of the image to the byte code of the image you returned, which will not work. You need to set it to the path of the image that you want to display. The Image object will perform a GET request to your server on its own, so there is no need for an ajax request. Something like the following should work for you:
client:
var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "/imagepath.png";
img.onload = function () {
ctx.drawImage(img,0,0);
}
server:
app.get('/imagepath.png', function (req, res) {
res.sendfile(path.resolve(path.resolve(__dirname,'/imagepath.png')));
});
