使用 HTML、CSS 和/或 javascript 自动从图像源 (src=" ") 的链接中生成快照

Question

在我的 HTML 文档中，我想为图像创建一个占位符，但保留源“待定”，这样当我在图像上放置链接时，它将从目标网站获取快照以用作图像源。如果您不太明白我在说什么，如下所示：

我想创建一个链接图像

并且我想使用 javascript 将“源”替换为“#”页面的快照。

我想使用它，以便在我的网站上我可以链接到 Youtube 视频（使用嵌入代码中的链接）并自动获取链接的缩略图，而无需输入链接/URL 之外的任何工作。

我不太懂 JavaScript，所以任何有关该部分的帮助将不胜感激，尽管如果可能的话，我会尝试使用非常少的 JavaScript 来完成此操作。非常感谢所有答案，如果需要更多信息，请询问。

Answer 1

如果你想放置 YouTube 屏幕截图，我建议使用 jQuery 和 jYouTube 以及我如何将其组合在一起：

JAVASCRIPT:

// Run when page is load
$(function(){

    // Find all <a> inside element with youTube class name
    $(".youTube a").each(function(){

        // Get reference to found <a> link
        var lnk = $(this);

        // Get YouTube thumb image for <a>'s href attribute
        var url = $.jYoutube(lnk.attr("href"));

        // Now update inside image's src attribute with thumbs image
        lnk.children('img').attr("src", url);
    });
});

HTML

<div class="youTube">
<a href="http://www.youtube.com/watch?v=jZxRWTz8qiY"><img src="#" /></a><br />
<a href="http://www.youtube.com/watch?v=jZxRWTz8qiY"><img src="#" /></a><br />
<a href="http://www.youtube.com/watch?v=jZxRWTz8qiY"><img src="#" /></a><br />
</div>

另外，我将其放在 jsfiddle 中以方便演示： http://jsfiddle.net/snyew/

我希望这有帮助:-)

Answer 2

它需要一个 Image 对象。

yourImg = document.getElementById("image_id");
var newImg = new Image();
newImg.src = //URL of the image to be acquired
yourImg.src = newImg.src;

Answer 3

假设您想对每个仅包含图像作为子项的链接执行此操作，您可以这样做：

$('a').each(function() {
  if($(this).children('img').length == 1 && $(this).children().length == 1) {

    // get snapshot
    var snapshotImgURL = getSnapShotOf($(this).attr('href')); // replace this with your AJAX call to get the snapshot

    // set it to the image
    $(this).children('img').attr('src', snapshotImgURL);

  }
});

上面假设您可以在项目中使用 jQuery。