Как получить удаленное изображение для отображения на холсте?

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 .

Вот очень простой пример использования объекта 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';

Другие советы

Если вы хотите нарисовать изображение на холсте, вам также нужно подождать, пока изображение действительно загрузится, поэтому правильное решение будет следующим: 

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

Чтобы добавить изображение в JavaScript, вы можете сделать следующее: 

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

Если изображение на вашей странице имеет идентификатор "image1", вы можете назначить источник изображения image1 для 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).

Прототип работает для всех объектов 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.");
}

не будет работать (по нескольким причинам, но я просто расскажу о прототипах).
Прототип является «свойством» своего рода, который содержит все ваши свойства / методы, которые вы вводите, и уже есть в каждом из HTML и нативных объектов Javascript (не тех, которые вы создаете).
Прототипы также позволяют легко вызывать (вместо «myImg.prototype.position.x» можно использовать «myImg.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