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

automatically make an image source (src=" ") a snapshot from its link with HTML, CSS, and/or javascript

本文关键字：CSS javascript 快照 链接 HTML src 图像 quot 自动生成      更新时间：2023-09-26

在我的HTML文档中，我想为图像创建一个占位符，但离开源'待定'，所以说，当我把一个链接放在图像上时，它将从目标网站获取快照用作图像源。如果你不太明白我在说什么，它如下:

我想创建一个链接图像

<a href="#"><img src="source"></a>

和我想使用javascript替换'源'与'#'页的快照。

我想使用这一点，以便在我的网站上，我可以链接到Youtube视频(使用嵌入代码中的链接)，并自动获取缩略图的链接没有任何工作超过输入链接/URL。

我不是很精通javascript，所以任何帮助，这部分将非常感激，虽然我试图做到这一点，如果可能的话，非常少的javascript。如果需要更多的信息，请随时询问。

如果你想把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/

我希望这有助于:-)

它接受一个Image对象。

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

假设您想要为每个只有图像作为子链接执行此操作，您可以:

$('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。

相关文章：