使用 javascript 处理图像答案

【问题标题】：Image handling with javascript使用 javascript 处理图像
【发布时间】：2018-06-22 15:14:11
【问题描述】：

您好，这是我的问题。当点击

时，我编写了一个从 javascript 应用程序获取 GET 请求的服务器

必须在不重新加载页面的情况下更改 a 的内容，但它不起作用。有人可以给予和建议吗？谢谢！这是我的代码：节点js：

else if (req.url == "/cats") {
        var chunk;
        fs.readdir('./Images/cats', function(err,data){
            if (err) throw err;
                for (var i = 0; i < data.length; i++) {
                    console.log("data",data[i]);
                    var mime_type = path.extname(data[i]).substr(1);

                    fs.readFile('./Images/cats/' + data[i], function(er,pics){
                        if (er) throw er;
                        console.log("pics",pics);
                        chunk = pics;
                        res.writeHead(200, {"Content-type": "image/" + mime_type});
                        res.end(chunk);
                    });
                }

            // res.end(chunk);
        });

这里是显示图片的 JavaScript 代码

var xhttp = new XMLHttpRequest();


function catsAll(){
console.log("123");
xhttp.open("GET", "/cats", true);
xhttp.send();

xhttp.onreadystatechange = function () {
    var cats = document.getElementById('img');
    if (this.readyState == 4 && this.status == 200) {

    console.log('abv');
    cats.innerHTML.src = '/cats' + xhttp.responseText;
    }
}

}

还有 HTML 本身 ..

<li onclick="catsAll()"><a href="#"  >Cats</a></li>


<div id="img" >

提前致谢！

【问题讨论】：

innerHTML 没有 src.... innerHTML 是元素中的 HTML 字符串
将此cats.src = '/cats' + xhttp.responseText; 视为innerHTML 不存在

标签： javascript node.js image server

【解决方案1】：

我认为您对响应的处理不正确。试试下面这个

if (this.readyState == 4 && this.status == 200) {

    console.log('abv');
    document.getElementById('img').src='/cats' + xhttp.responseText;
    }

这是因为您没有使用当前代码更新 img 元素 src。你根本不应该使用 innerHTML 属性

【讨论】：

IMO 您应该鼓励没有经验的开发人员使用严格相等 (===)。如果你在任何地方都使用严格相等（即使它真的需要）你不会忘记在你真正需要它的时候使用它。

【解决方案2】：

所以，有几件事……第一，您的 HTML 中没有实际的 <img> 标记。如果您想通过以下任一方式显示图像，您将需要它：a）指向其在服务器上的位置的链接或 b）数据 URL。

第二，您正试图将实际图像数据从服务器传回，就好像它是一个文档一样，但我认为您不能将其分配给图像标签。您需要它是 data-url，它是浏览器期望的图像的 base64 编码表示。

如果可以的话，我会完全删除服务器端并让浏览器完成工作。只需将图片的src改成图片在服务器上的位置（如果需要触摸服务器，只要返回一个字符串代表图片在服务器上的位置即可）。

编辑仔细考虑一下，如果您可以让它根据标识符返回特定的猫图像资源，那么您的服务器端就不远了。但是如果它将猫图像作为文档提供，那么您根本不需要 XHR 请求。只需更改图像的来源即可。

var i = 0;
function cats(){
  document.getElementById('img').src = "/cats/"+ (++i);
}

<a href="#" onclick="cats()" />
<img src="" id="img" />

【讨论】：