使用 javascript 从图像中提取 URL答案

【问题标题】：Using javascript to pull URL from an image使用 javascript 从图像中提取 URL
【发布时间】：2014-12-12 18:47:33
【问题描述】：

所以我制作了一个小脚本，它使用 Flickr API 来搜索网站上的标签，它会返回包含该标签的图像，一切正常。

我的问题是当我尝试获取图像的 URL 时，不知道该怎么做，因为我已经看到了一些不同的方法，但没有一个真正帮助我，基本上我想单击保存图像按钮并它将打印当前显示的图像的 URL。

我在这里有一个演示 http://jsfiddle.net/u8544ko4/

HTML：

                <title>get image</title>
<body>
    <form>
    <input type="text" id="search" placeholder="Enter Tag ... E.g. Cars">

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <input type="button" id="button" value="Search For Image">
    <input type="button" id="sbutton" value="Save Image">
    </form>
    <br>

CSS

img{height:auto; float: left;}

Javascript

$(document).ready(function () {
            $("#button").click(function () {
                $("#images").empty();


                var search1 = document.getElementById("search").value;

                $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                        {
                            tags: search1,
                            tagmode: "any",
                            format: "json"
                        }, function (data) {
                    $.each(data.items, function (i, item) {
                        $('<img/>').attr("src", item.media.m).appendTo('#images');
                        if (i === 0)
                            return false;

                    });


                });

            });
        });

感谢阅读！任何帮助表示赞赏！

【问题讨论】：

但是url应该和图片src一样的url，item.media.m

标签： javascript jquery html image flickr

【解决方案1】：

如果我理解正确的话。

$(document).ready(function() {
  $("#button").click(function() {
    $("#images").empty();


    var search1 = document.getElementById("search").value;

    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
      tags: search1,
      tagmode: "any",
      format: "json"
    }, function(data) {
      $.each(data.items, function(i, item) {
        $('<img/>').attr("src", item.media.m).appendTo('#images');
        $("#sbutton").prop('disabled', false);
        if (i === 0)
          return false;

      });


    });

  });

  $("#sbutton").click(function() {
    var iImage = $("#images img");
    $("#images p").empty();
    iImage.after("<p>" + iImage.attr("src") + "</p>");
  });
});

img {
  height: auto;
  float: left;
}

<title>get image</title>

<body>
  <form>
    <input type="text" id="search" placeholder="Enter Tag ... E.g. Cars">

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <input type="button" id="button" value="Search For Image">
    <input type="button" id="sbutton" value="Save Image" disabled>
  </form>
  <br>
  <div id="images"></div>

【讨论】：

太棒了！正是我要找的！想解释一下你是怎么做到的，我想我自己太复杂了

【解决方案2】：

要返回图像源使用

$("img").attr("src");

检查您的代码：http://jsfiddle.net/mzvaan/axw5mteh/

【讨论】：

谢谢！这也有效，但我想打印到页面上，如果可以的话会投票！