javascript - HTML画像要素オブジェクトを介して画像を表示する

Question

私は次のコードを持っています：

function createImage(source) {                
var pastedImage = new Image();                
pastedImage.onload = function() {
                    
}
pastedImage.src = source;
}

この関数createImageには、画像のソースを含むソースパラメータが含まれています。その後、pastedImageクラスのオブジェクトを作成し、のImageようなhtml画像要素オブジェクトを取得していることを警告した後[object HTMLImageElement]。

私の質問は、そのオブジェクトを使用してHTMLページに画像を表示する方法です。機能後に表示したいonload。

Answer 1

ひや：作業デモ http://jsfiddle.net/wXV3u/

使用したAPI= .html http://api.jquery.com/html/

デモでは、click meボタンをクリックします。

お役に立てれば！私が何かを逃したかどうかを知ってください！B-）

コード

$('#foo').click(function() {
    createImage("http://images.wikia.com/maditsmadfunny/images/5/54/Hulk-from-the-movie.jpg");

});

function createImage(source) {
    var pastedImage = new Image();
    pastedImage.onload = function() {

    }
    pastedImage.src = source;
    $(".testimonialhulk").html(pastedImage);
}​

Answer 2

また、あなたはこのようにすることができます：

    function createImage(source) {
        var pastedImage = new Image();
        pastedImage.onload = function() {

 document.write('<br><br><br>Your image in canvas: <img src="'+pastedImage.src+'" height="100" width="200"/>');                      

        }
        pastedImage.src = source;        
    }​

Answer 3

javascript domプリミティブ（replaceChild）を使用した、シンプルで優れた機能：

画像の親、それを含むdivまたはspanを取得し、古いimgタグを関数で作成した新しい画像オブジェクトに置き換えます

 var domImgObj = document.getElementById("image");

 var imgObj = createImage(src); // your function
 imgObj.id = pageimgObj.id; // necessary for future swap-outs

 document.getElementById("container").replaceChild(imgObj,domImgObj);

Answer 4

資料。createRange（）。createContextualFragment（img.outerHTML）

例

const img = new Image()
img.src = "https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"
const frag = document.createRange().createContextualFragment(`${img.outerHTML}`)
document.querySelector(`body`).append(frag)