如何在javascript中打开图像，由express.js sendfile函数[+SOLUTION]发送

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

本文关键字：sendfile js express 函数 发送 +SOLUTION javascript 图像      更新时间：2024-04-19

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

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

如何在客户端的Image对象中获取数据？这是我的成功方法，至少我试过了。。。

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

您试图将图像的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')));
});
相关文章：