La toile html5 ne montre pas l'image complète

Ma taille d'image est de 940 * 300 mais la toile html5 montre seulement une partie de l'image en chrome. Pouvez-vous s'il vous plaît aider à résoudre ce problème?La toile html5 ne montre pas l'image complète

est Ci-dessous le code

<!DOCTYPE html> 
<html> 
    <head> 
     <style></style> 
    </head> 
    <body onload="draw();"> 
     <p>Drag me</p> 
     <canvas id="paint_area"></canvas> 

     <script> 
      function draw() { 
       var ctx = document.getElementById('paint_area').getContext('2d'); 

       //ctx.fillStyle = '#cc3300'; 

       var img_buffer = document.createElement('img'); 
       img_buffer.src = 'http://www.jobcons.in/homebanner.jpg'; 
       var imgWidth = img_buffer.width; 
       var imgHeight = img_buffer.height; 
       ctx.width = imgWidth; 
       ctx.height = imgHeight; 
       ctx.drawImage(img_buffer,0,0,imgWidth,imgHeight); 
      } 
     </script> 
    </body> 
</html>

Source

2011-08-19 dharani

Deux choses:

Vous établissiez la taille du contexte qui ne fait pas beaucoup de sens. La toile a une largeur et une hauteur.
Vous devriez vraiment utiliser img_buffer.onload pour vous assurer que vous peignez seulement l'image quand elle est chargée et pas avant qu'elle soit complètement chargée.

Fiddle: http://jsfiddle.net/pimvdb/TpFQ8/

Alors:

<canvas id="paint_area" width="940" height="300"></canvas>

et:

var cv = document.getElementById('paint_area'), 
    ctx = ctx.getContext('2d');

et:

img_buffer.onload = function() { 
    var imgWidth = img_buffer.width; 
    var imgHeight = img_buffer.height; 
    cv.width = imgWidth; 
    cv.height = imgHeight; 
    ctx.drawImage(img_buffer, 0, 0, imgWidth, imgHeight); 
}

Source

2011-08-19 16:42:00 pimvdb

Vous devez changer '' ctx.width' à ctx.canvas.width'. – Phrogz

@Phrogz: Vous avez raison. J'ai manqué ça. Merci. – pimvdb

La raison est tout simplement que vous ne pouvez pas faire

ctx.width= imgWidth; 
    ctx.height=imgHeight;

Vous devez faire

can.width= imgWidth; 
    can.height=imgHeight;

Où can est une référence à la toile, et pas le contexte de la toile.

Exemple de travail:

http://jsfiddle.net/rbNzb/

Source

2011-08-19 17:27:00

Notez que vous pouvez obtenir une référence à la toile à partir du contexte avec 'ctx.canvas'. – Phrogz

La toile html5 ne montre pas l'image complète

Répondre

Questions connexes