원격 이미지를 가져와 캔버스에 표시하는 방법은 무엇입니까?
-
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 태그에 너비와 다른 것을 추가 할 수도 있습니다.