автоматически сделать источник изображения (src = "") снимком из его ссылки с HTML, CSS и / или JavaScript

Question

В моем HTML-документе я хочу создать местозаполнитель для изображения, но оставить так сказать источник «Определено», чтобы при размещении ссылки на изображение он получал снимок с целевого веб-сайта для использования в качествеисточник изображения.Если вы не совсем понимаете, о чем я говорю, это выглядит следующим образом:

Я хочу создать связанное изображение

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

и хочу использовать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

Предполагая, что вы хотите сделать это для каждой ссылки с дочерним изображением, вы можете сделать:

$('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 в проекте.

Answer 3

Требуется объект Image.

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