javascript - 如何在 javascript 中打开由 express.js sendfile 函数发送的图像[+解决方案]

Question

我有一个简单的服务器有这个方法

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

如何在客户端获取图像对象中的数据？这是我的 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
}

真正寻找答案已经 2 天了......尝试了很多方法，但没有一个有效。我什至不确定我从服务器收到了什么 - 是字节数组吗？

解决方案:所以，我发现 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;
            }

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