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

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

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

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

您正在尝试将映像的src属性设置为返回的映像的字节码，这将不起作用。您需要将其设置为要显示的图像的路径。图像对象将自己执行对服务器的GET请求，因此不需要ajax请求。以下内容应该适合您：

客户：

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

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

您正在尝试将映像的src属性设置为返回的映像的字节码，这将不起作用。您需要将其设置为要显示的图像的路径。图像对象将自己执行对服务器的GET请求，因此不需要ajax请求。以下内容应该适合您：

客户：

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

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

---

您的console.log报告了什么？您还将向$.ajax传递哪些其他参数？查看canvas文档表明img.src应该是字符串文件名，即图像在服务器上的位置。在这一点上，我想它就像html中的图像标记一样工作。您的console.log报告了什么？您还将向$.ajax传递哪些其他参数？查看canvas文档表明img.src应该是字符串文件名，即图像在服务器上的位置。在这一点上，我想象它就像html中的图像标记一样工作。经过一个小时的思考和尝试，你的方法工作得非常完美。在一个小时的思考和尝试后，你的方法非常有效。将为问题添加解决方案。