8

如何从服务器获取图像？

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

<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);
}
4

6 回答 6

23

使用内置的JavaScript Image 对象。

这是一个使用 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';
于 2008-10-02T19:44:43.827 回答
8

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

myimage = new Image();
myimage.onload = function() {
    context.drawImage(myimage, ...);
}
myimage.src = 'http://myserver/nextimage.cgi';
于 2008-10-03T02:03:55.647 回答
2

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

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

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

于 2008-10-02T19:47:04.227 回答
1

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

做类似的事情：

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) 处绘制到画布上。

原型适用于所有 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.");
    }
}
于 2012-03-09T15:52:16.500 回答
0

使用承诺：

class App {
  imageUrl = 'https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4HZBo'

  constructor(dom) {
    this.start(dom)
  }

  async start(dom) {
    const appEl = dom.createElement('div')
    dom.body.append(appEl)
    
    const imageEl = await this.loadImage(this.imageUrl)
    
    const canvas = dom.createElement('canvas')
    canvas.width = imageEl.width
    canvas.height = imageEl.height
    const ctx = canvas.getContext('2d')
    ctx.drawImage(imageEl, 0, 0)
    
    appEl.append(canvas)
  }
  
  loadImage = async (url) => 
    new Promise((resolve) => {
      const imageEl = new Image()
      imageEl.src = url
      imageEl.onload = () => resolve(imageEl)
    })
}

new App(document)

于 2021-12-17T03:51:18.400 回答
-3

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

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

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

于 2008-10-02T19:55:03.863 回答