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

StackOverflow https://stackoverflow.com/questions/164181

  •  03-07-2019
  •  | 
  •  

题

如何从服务器获取图像？

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

<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);
}
有帮助吗？

解决方案

使用内置的 JavaScript 图像对象.

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

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

根据对此答案的评论，这是一个更适合您的场景的机制。

谢谢 奥利杰!

值得注意的是，您无法同步请求资源，因此您实际上应该执行以下操作：

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

其他提示

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

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

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

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

如果您网页上的图片有ID“image1”，您可以将image1的src分配给myimage.src。

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

做类似的事情：

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

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

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

“位置”。变量允许你在画布上移动它。
所以可以这样做：

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.");
}

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

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

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

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top