如何在JavaScript中使用Express.js的sendfile函数打开图像[+解决方案]

Question

我有一个简单的服务器，其中包含这个方法：

app.post('/', function (req, res) {
    res.sendfile(path.resolve(req.files.image.path));
});

如何在客户端Image对象中获取数据？以下是我的ajax.success方法，至少我尝试过这样做...

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
}

我已经寻找答案两天了...尝试了很多方法，但都没有成功。我甚至不确定从服务器接收到的是字节数组吗？

解决方案： 所以，我发现post请求不需要将文件发送回来，Image.src会向服务器发送自己的get请求。

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

客户端：

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

- Alexander Capone

---

你的console.log报告显示了什么？你还传递了哪些其他参数给$.ajax？查看canvas文档（http://www.html5canvastutorials.com/tutorials/html5-canvas-images/）建议img.src应该是图像在服务器上的文件名字符串。此时，我想它就可以正常工作了（有点像html中的图像标签）。 - tandrewnichols

Answer 1

你试图将图像的src属性设置为你返回的图像的字节码，这样是行不通的。你需要将它设置为你想要显示的图像的路径。Image对象将自行执行GET请求到你的服务器，所以不需要进行ajax请求。下面的代码应该可以帮到你：

客户端：

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

服务器：

app.get('/imagepath.png', function (req, res) {
    res.sendfile(path.resolve(path.resolve(__dirname,'/imagepath.png')));
});

- Ari

---

经过一小时的思考和尝试，你的方法完美地解决了问题。现在要添加解决方案到一个问题中。 - Alexander Capone