Question

如何从服务器获取图像？

我有一些代码可以让我在画布上绘制一些图像。

<html>
  <head>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('canv');
        var ctx = canvas.getContext('2d');

        for (i=0;i<document.images.length;i++){
          ctx.drawImage(document.images[i],i*150,i*130);
        }
    }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canv" width="1024" height="1024"></canvas>
    <img src="http://www.google.com/intl/en_ALL/images/logo.gif">
    <img src="http://l.yimg.com/a/i/ww/beta/y3.gif">
    <img src="http://static.ak.fbcdn.net/images/welcome/welcome_page_map.png">
  </body>
</html>

我不想循环遍历document.images，而是希望不断从服务器上获取图像。

for (;;) {
    /* how to fetch myimage??? */
    myimage = fetch???('http://myserver/nextimage.cgi');
    ctx.drawImage(myimage, x, y);
}

Answer 1

使用内置JavaScript Image object。

以下是使用Image对象的一个非常简单的示例：

myimage = new Image();
myimage.src = 'http://myserver/nextimage.cgi';

根据对此答案的评论，这是针对您的方案的更合适的机制。

谢谢olliej！

值得注意的是，您无法同步请求资源，因此您应该按照以下方式执行某些操作：

myimage = new Image();
myimage.onload = function() {
                     ctx.drawImage(myimage, x, y);
                 }
myimage.src = 'http://myserver/nextimage.cgi';

Answer 2

如果你想将图像绘制到画布上，你还需要等待图像实际加载，所以正确的做法是：

myimage = new Image();
myimage.onload = function() {
    context.drawImage(myimage, ...);
}
myimage.src = 'http://myserver/nextimage.cgi';

Answer 3

要在JavaScript中添加图片，您可以执行以下操作：

myimage = new Image()
myimage.src='http://....'

如果页面上的图像具有ID“image1”，则可以将image1的src分配给myimage.src。

Answer 4

我发现使用原型在这里非常有帮助。如果您不熟悉它们，原型是对象的一部分，允许您为它们设置自己的变量和/或方法。

做类似的事情：

Image.prototype.position = {
    x: 0,
    y: 0
}

Image.prototype.onload = function(){
    context.drawImage(this, this.position.x, this.position.y);
}

允许您设置位置并绘制到画布而无需太多工作。

“position”变量允许您在画布上移动它所以可以这样做：

var myImg = new Image();
myImg.position.x = 20;
myImg.position.y = 200;
myImg.src = "http://www.google.com/intl/en_ALL/images/logo.gif";

，图像将自动绘制到画布上（20,200）。

Prototype适用于所有HTML和本机Javascript对象。所以

Array.prototype.sum = function(){
    var _sum = 0.0;
    for (var i=0; i<this.length; i++){
        _sum += parseFloat(this[i]);
    }
    return _sum;
}

为所有数组提供了一个新函数。

然而，

var Bob;
Bob.Prototype.sayHi = function(){
    alert("Hello there.");
}

不起作用（出于多种原因，但我只是谈论原型） Prototype是各种类型的“属性”，它包含您输入的所有属性/方法，并且已经存在于每个HTML和本机Javascript对象（不是您创建的对象）中。原型也允许轻松调用（你可以做“myImg.position.x”而不是“myImg.prototype.position.x”）。

此外，如果你要定义变量，你应该更像这样。

var Bob = function(){
    this.sayHi = function(){
        alert("Hello there.");
    }
}

Answer 5

如果你使用的是jQuery，你可以这样做：

$.('<img src="http://myserver/nextimage.cgi" />').appendTo('#canv');

您还可以在img标签中添加宽度和其他任何内容。

如何获取要在画布中显示的远程图像？

5 个答案: