使用外部js文件加載圖像

Question

我正在嘗試使用包含以下內容的外部js文件加載圖像：

myimage = new Image(1,1);
myimage.src = 'http://myserver.com/pixel.gif';

我看到js文件已加載，並且控制台中沒有錯誤，但是也沒有調用我的圖像像素。 任何想法？

編輯：在第一個響應后，我嘗試了以下操作，但仍然無法正常工作：

var myimage = document.createElement("img");
myimage.src = 'http://myserver.com/pixel.gif';
myimage.height = "1";
myimage.width = "1";
document.body.appendChild(myimage);

Answer 1

該圖像需要插入到頁面/ DOM中。

在將圖像直接放置到頁面/ DOM中並因此加載之前，將不會調用該圖像。

您想要的將通過以下方式發生： document.body.appendChild(myimage)

Answer 2

在http://www.w3schools.com/tags/canvas_drawimage.asp上有一個如何通過將圖像插入畫布來執行此操作的示例。

我發現有一個小的修改使此工作更好，這是將drawImage行放入img.onload回調中，如下所示：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload(function() {ctx.drawImage(img,10,10);});