Come recuperare un'immagine remota da visualizzare in un'area di disegno?
-
03-07-2019 - |
Domanda
Come posso recuperare le immagini da un server?
Ho questo codice che mi permette di disegnare alcune immagini su una tela.
<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>
Invece di passare in rassegna document.images, vorrei recuperare continuamente le immagini da un server.
for (;;) {
/* how to fetch myimage??? */
myimage = fetch???('http://myserver/nextimage.cgi');
ctx.drawImage(myimage, x, y);
}
Soluzione
Utilizza oggetto immagine JavaScript incorporato olliej !
Vale la pena notare che non è possibile richiedere una risorsa in modo sincrono, quindi si dovrebbe effettivamente fare qualcosa sulla falsariga di:
myimage = new Image();
myimage.onload = function() {
ctx.drawImage(myimage, x, y);
}
myimage.src = 'http://myserver/nextimage.cgi';
Altri suggerimenti
Se vuoi disegnare un'immagine su una tela devi anche aspettare che l'immagine si carichi effettivamente, quindi la cosa giusta da fare sarà:
myimage = new Image();
myimage.onload = function() {
context.drawImage(myimage, ...);
}
myimage.src = 'http://myserver/nextimage.cgi';
Per aggiungere un'immagine in JavaScript è possibile effettuare le seguenti operazioni:
myimage = new Image()
myimage.src='http://....'
Se un'immagine sulla tua pagina ha un ID "image1", puoi assegnare lo src di image1 a myimage.src.
Ho scoperto che usare i prototipi è molto utile qui. Se non si ha familiarità con essi, i prototipi fanno parte di oggetti che consentono di impostare le proprie variabili e / o metodi su di essi.
Fare qualcosa del tipo:
Image.prototype.position = {
x: 0,
y: 0
}
Image.prototype.onload = function(){
context.drawImage(this, this.position.x, this.position.y);
}
ti consente di impostare la posizione e disegnare sulla tela senza troppo lavoro.
La posizione "quotata" La variabile ti consente di spostarlo nell'area di disegno.
Quindi è possibile fare:
var myImg = new Image();
myImg.position.x = 20;
myImg.position.y = 200;
myImg.src = "http://www.google.com/intl/en_ALL/images/logo.gif";
e l'immagine verrà automaticamente disegnata sulla tela a (20.200).
Il prototipo funziona per tutti gli oggetti HTML e Javascript nativi. Quindi
Array.prototype.sum = function(){
var _sum = 0.0;
for (var i=0; i<this.length; i++){
_sum += parseFloat(this[i]);
}
return _sum;
}
fornisce una nuova funzione a tutti gli array.
Tuttavia,
var Bob;
Bob.Prototype.sayHi = function(){
alert("Hello there.");
}
non funzionerà (per diversi motivi, ma parlerò solo di prototipi).
Il prototipo è una "proprietà" di sorta, che contiene tutte le proprietà / i metodi che hai inserito, ed è già presente in ciascuno degli oggetti HTML e Javascript nativi (non quelli che crei).
I prototipi consentono anche una facile chiamata (puoi fare " myImg.position.x " invece di " myImg.prototype.position.x ").
Inoltre, se stai definendo la tua variabile, dovresti farlo in questo modo.
var Bob = function(){
this.sayHi = function(){
alert("Hello there.");
}
}
Se stai usando jQuery puoi fare:
$.('<img src="http://myserver/nextimage.cgi" />').appendTo('#canv');
Puoi anche aggiungere larghezze e qualsiasi altra cosa nel tag img.