使用外部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);});