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?

SOLUTION: 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;
            }

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?

SOLUTION: 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;
            }

• javascript
• node.js
• express

• What does your console.log report? And what other parameters are you passing to $.ajax? Looking at the canvas docs (html5canvastutorials./tutorials/html5-canvas-images) suggests img.src should be the string filename (i.e. location on your server) of the image. At which point, I imagine it just works (kind of the way an image tag in html does). – tandrewnichols Commented Dec 6, 2013 at 2:12

1 Answer 1

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')));
});