Caricamento di un'immagine su una tela con javaScript

Ciao a tutti sto attualmente testando l'elemento canvas per disegnare tutti gli sfondi (aggiungerò effetti più tardi a queste immagini ed è la ragione per cui non uso CSS per caricare le immagini), detto che attualmente sto avendo difficoltà a caricare un'immagine sulla tela. Ecco il codice:Caricamento di un'immagine su una tela con javaScript

<html> 

<head> 

    <title>Canvas image testing</title> 

    <script type="text/javascript"> 
     function Test1() { 
      var ctx = document.getElementById('canvas'); 
      if (canvas.getContext) { 

       var ctx = canvas.getContext('2d'); 

       //Loading of the home test image - img1 
       var img1 = new Image(); 
       img1.src = 'img/Home.jpg'; 

       //drawing of the test image - img1 
       img1.onload = function() { 
        //draw background image 
        ctx.drawimage(img1, 0, 0); 
        //draw a box over the top 
        ctx.fillStyle = "rgba(200, 0, 0, 0.5)"; 
        ctx.fillRect(0, 0, 500, 500); 

       }; 
      } 

     } 


    </script> 

    <style type="text/css"> 
     canvas { border: 2px solid black; width: 100%; height: 98%; } 
    </style> 
</head> 

<body onload="Test1();"> 

    <canvas id="canvas" width="1280" height="720"></canvas> 


</body>

penso che non sto caricando l'immagine correttamente, ma non sono sicuro.

fonte

2013-02-07 dee Five

Ci sono un paio di cose:

drawimage dovrebbe essere drawImage - notare la capitale i.
Il tuo getElementById sta cercando un elemento con ID di canvas, ma dovrebbe essere test1. canvas è il tag, non l'ID.
Sostituisci la variabile (ad esempio nelle tue linee canvas.getContext) con ctx, poiché è la variabile che hai utilizzato per selezionare il tuo elemento canvas.
Associare il gestore onload prima di impostare lo src dell'immagine.

Così la vostra funzione dovrebbe finire così:

function Test1() { 
    var ctx = document.getElementById('test1'); 
    if (ctx.getContext) { 

     ctx = ctx.getContext('2d'); 

     //Loading of the home test image - img1 
     var img1 = new Image(); 

     //drawing of the test image - img1 
     img1.onload = function() { 
      //draw background image 
      ctx.drawImage(img1, 0, 0); 
      //draw a box over the top 
      ctx.fillStyle = "rgba(200, 0, 0, 0.5)"; 
      ctx.fillRect(0, 0, 500, 500); 

     }; 

     img1.src = 'img/Home.jpg'; 
    } 
}

fonte

2013-02-07 18:05:14 freejosh

freejosh è giusto, ma volevo solo aggiungere che non è uno stile molto buono usare la variabile 'ctx' per la tela e sovrascriverla con il contesto successivo. Si potrebbe usare 'var canvas' per il riferimento del canvas. – Mathias

Grazie: D che risolve il problema mi sento un po 'noob ma grazie !!! –

Una domanda, perché dobbiamo impostare l'origine dell'immagine dopo l'evento onload? – Eliyah

mossa il listener di eventi onload a prima di impostare la src per l'immagine.

var img1 = new Image(); 

    //drawing of the test image - img1 
    img1.onload = function() { 
     //draw background image 
     ctx.drawImage(img1, 0, 0); 
     //draw a box over the top 
     ctx.fillStyle = "rgba(200, 0, 0, 0.5)"; 
     ctx.fillRect(0, 0, 500, 500); 

    }; 

    img1.src = 'img/Home.jpg';

fonte

2013-02-07 18:07:42 Iwan

Utilizzo delle funzioni JavaScript più recenti:

let img = await loadImage("./my/image/path.jpg"); 
ctx.drawImage(img, 0, 0);

e la funzione loadImage aspetto:

function loadImage(url) { 
    return new Promise(resolve => { let i = new Image(); i.onload =()=>{resolve(i)}; i.src=url; }); 
}

fonte

2017-06-22 08:36:06 JoeRocc

Assegnare la risorsa file locale (url) a fonte immagine e disegnare un'immagine utilizzando contesto dalla tela che vuoi caricare. Questo è tutto. Vedi il codice qui sotto.

var loadImage = function (url, ctx) { 
    var img = new Image(); 
    img.src = url 
    img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    } 
}

fonte

2017-07-02 05:35:55 NPE

Caricamento di un'immagine su una tela con javaScript

risposta

Problemi correlati