如何在 JavaScript 中获取图像的 URL？

Question

我正在开发一个 Chrome 扩展程序，并且我正在为页面上的每个图像添加一个 onmouseover 处理程序。当用户将鼠标悬停在图像上时，它的 URL 应该存储在一个变量中。我知道我可以轻松获取图像的 src 属性的值，但我想要完整的 URL。 src 属性存储图像在服务器上的路径。例如，当您在 Google Chrome 中右键单击图像时，您会看到“复制图像 URL”选项，该选项会将图像的 URL 复制到剪贴板。

有什么方法可以实现吗？谢谢。

Answer 1

所以 TL;DR 是这样的：

(function() {

  const imageInfo = new Object();
  imageInfo.source = '';

  window.addEventListener('mouseover', function (event) {
    var currentElement = event.target;
    // console.log(event.target);
    if (currentElement.tagName === 'IMG') {
      // console.log(currentElement.outerHTML + "is a photo");
      imageInfo.source = currentElement.src;
      // console.log("src is :" + imageInfo.source)
      return imageInfo.source;
    }
  })
})();

见 CodePen：

How to find the src URL for a photo by Trevor Rapp on CodePen

这是我在最基本的步骤中考虑解决问题的方式：

1. 让函数触发。
2. 获取函数以添加事件侦听器，该侦听器将对鼠标悬停事件执行操作。
3. 让该动作知道鼠标当前所在的位置。
4. 判断鼠标当前是否是图像。
5. 创建将响应的逻辑。
6. 逻辑应该执行的操作是返回源 URL。
7. 如果我必须返回该源 URL，我将需要存储它。

这些解决方案的外观如下：

1. 让函数触发。

IFFE 是触发函数的好方法，无需担心会污染名称空间。

//skeleton for an IFFE statement

(function() {

})();

1. 获取函数以添加事件侦听器，该侦听器将对鼠标悬停事件执行操作。

一个可以在任何地方触发的事件监听器必须附加到窗口或文档。

1. 让该动作知道鼠标当前所在的位置。

此部分将与第 2 部分合并。事件监听器的第一个参数是您要监听的事件类型——在本例中为“鼠标悬停”。所以现在我们的代码是这样的

(function () {
  window.addEventListener('mouseover', function (event) {
  //do stuff here
  }
})()

4. 判断鼠标当前是否是图像。

*要确定鼠标当前位于哪个元素上，您可以使用 Event.target。 MDN 的定义是：*

Event 接口的 target 属性是对事件被调度到的对象的引用。在事件的冒泡或捕获阶段调用事件处理程序时，它与 Event.currentTarget 不同。 --Event.Target

*所以代码看起来像这样：*

(function () {
  window.addEventListener('mouseover', function (event) {
  //get the current element the mouse is over
  var currentElement = event.target;

  }
})()

5. 创建将响应的逻辑。

这有点棘手，因为照片或 IMG 可以以多种方式呈现。 我选择以最简单的方式创建解决方案，即假设 Web 开发人员使用语法更正确的标签版本。但是，很多时候他们可能会选择将“背景图像”CSS 属性应用于普通 .其他要考虑的事情可能是使用 iframe，这会使检测子元素的属性非常令人沮丧，因为它们不允许冒泡发生。要判断元素是否为 ，您可以简单地使用 elem.tagName === "IMG" 进行逻辑检查。虽然没有包含在上面的代码中，但如果你想检查一个 div 是否正在使用“背景图像”，你可以使用element.getAttribute('style').includes('term') 之类的东西，然后将 'term' 换成 'url' 或 'jpg' 之类的东西，或者'png。'有点笨拙和笨拙，但只是一个想法。无论如何，代码会变成

(function () {
  window.addEventListener('mouseover', function (event) {
  //get the current element the mouse is over
  var currentElement = event.target;
        if (currentElement.tagName === 'IMG') {
           //do stuff
    }
  }
})()

6. 逻辑应该执行的操作是返回源 URL。

完成逻辑并正确选择元素后，您可以使用element.src 获取源 URL。

1. 如果我必须返回该源 URL，我将需要存储它。

您可以随心所欲地执行此操作，但我尝试了实例化一个对象，因为听起来值需要经常更改，但您不一定需要存储以前的值。

所以最终的产品可能是这样的

(function() {

  const imageInfo = new Object();
  imageInfo.source = '';

  window.addEventListener('mouseover', function (event) {
    var currentElement = event.target;
    // console.log(event.target);
    if (currentElement.tagName === 'IMG') {
      // console.log(currentElement.outerHTML + "is a photo");
      imageInfo.source = currentElement.src;
      // console.log("src is :" + imageInfo.source)
      return imageInfo.source;
    }
  })
})();

Answer 2

使用imageElement.src 属性而不是读取原始标记的imageElement.getAttribute("src") 或$("img.something").attr("src")，它将始终为您提供完整的URL。

var imgFullURL = document.querySelector('img.something').src;

或：

var imgFullURL = $('img.something')[0].src;

要提取主机名、路径名等 - 使用 URL() 构造函数解析 url，该构造函数适用于现代浏览器，或者通过创建临时 a 节点使用旧方法。

Answer 3

您可以使用window.location 获取您当前所在的页面，以下将为您提供所需的 URL 部分：

window.location.protocol = "http:"
window.location.host = "stackoverflow.com"
window.location.pathname = "/questions/32828681/how-to-get-url-of-an-image-in-javascript"

因此，您可能需要protocol，然后是“//”，然后是host，最后是图片src。