image étirée HTML tirages toile lors de sa création en utilisant jQuery

Consultez le code suivant (y compris jQuery):image étirée HTML tirages toile lors de sa création en utilisant jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript" src = "js/jquery-1.4.2.js"></script> 
<script type="text/javascript"> 

jQuery(window).bind("load", function() { 
    var elem = $("<canvas>", {width:300, height:300}); 

    var canvele = elem[0]; 


    var imm = new Image(); 

    imm.src = "card1/mask-x-6.png"; 
    imm.onload = function(){ 
     var ctx = canvele.getContext('2d'); 
     ctx.drawImage(imm, 0,0); 
     $('body').append(elem); 
    } 
}); 


</script> 
</head> 
<body> 

</body> 
</html>

Cela se traduira par l'image TENDUE, pas dans ce rapport d'aspect d'origine. À la fois sur Firefox et Chrome. Pourquoi cela arrive? Solutions de contournement?

Mise à jour

Mes excuses cette chose ne se produit pas si je ne l'utilise jQuery pour générer la toile Element. Je posterai aussi ceci sur les forums jQuery.

Source

2010-07-06 gotch4

Une toile HTML5, comme une image HTML, possède à la fois une intrinsèque taille le nombre de pixels de large et de grande taille dans l'image et la source d'un affichage taille la taille, il est dessiné sur la page HTML. Si ces deux tailles sont définies différemment, l'image sera étirée.

Le code jQuery vous avez utilisé pour créer votre élément de toile définit l'affichage taille à 300x300px en définissant les attributs CSS width et height, mais ne définit pas la taille intrinsèque différemment the default de 300x150. En tant que tel, tout ce que vous dessinez sera étiré deux fois plus haut.

Pour résoudre ce problème, définissez les attributs réels width et height de l'élément canvas directement. Dans le code suivant, j'ai fait ce correctif. Je l'ai également corrigé pour utiliser un DOCTYPE HTML5, et je set the img.onload before the img.src:

<!DOCTYPE html> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Setting Canvas Dimensions</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
    var elem = $("<canvas>", {width:300, height:300}); 
    var canvele = elem[0]; 
    canvele.width = canvele.height = 300; 

    var imm = new Image; 
    imm.onload = function(){ 
    var ctx = canvele.getContext('2d'); 
    ctx.drawImage(imm, 0,0); 
    $('body').append(elem); 
    }; 
    imm.src = "http://phrogz.net/tmp/gkhead.jpg"; 
}); 
</script> 
</head><body></body></html>

Source

2011-04-02 05:25:13 Phrogz

image étirée HTML tirages toile lors de sa création en utilisant jQuery

Répondre

Questions connexes