원격 이미지를 가져와 캔버스에 표시하는 방법은 무엇입니까?

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>

문서를 통한 반복 대신 서버에서 이미지를 계속 가져오고 싶습니다.

for (;;) {
    /* how to fetch myimage??? */
    myimage = fetch???('http://myserver/nextimage.cgi');
    ctx.drawImage(myimage, x, y);
}
도움이 되었습니까?

해결책

내장을 사용하십시오 자바 스크립트 이미지 개체.

다음은 이미지 개체를 사용하는 매우 간단한 예입니다.

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://....'

페이지의 이미지에 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) 캔버스로 그려집니다.

프로토 타입은 모든 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.prototyp.xposition.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