How to open image in javascript,sent by express.js sendfile function[+SOLUTION]

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?

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

What does your console.log report? And what other parameters are you passing to $.ajax? Looking at the canvas docs (html5canvastutorials.com/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
– tandrewnichols, Commented Dec 6, 2013 at 2:12

Ari · Accepted Answer · 2013-12-06 05:29:20Z

7

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

answered Dec 6, 2013 at 5:29

Ari

3,6995 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexander Capone Over a year ago

after 1 hour of thinking and trying, your way worked perfectly. going to add solution to a question.

Collectives™ on Stack Overflow

How to open image in javascript,sent by express.js sendfile function[+SOLUTION]

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related