drawImage und die Größe auf Leinwand

Ich habe ein Bild, das ist 1836 x 3264 Ich mag drawImage()-739 x 1162drawImage und die Größe auf Leinwand

Nach dem Lesen der Dokumentation dachte ich auf der Leinwand und die Größe dieses mit dem folgenden erreicht werden könnte:

ctx.drawImage(image, 0, 0, 739, 1162);

habe ich auch versucht:

ctx.drawImage(image, 0, 0, 1836, 3264, 0, 0, 739, 1162);

Beide zeigen nur einen kleinen Teil des Gesamtbildes, anstatt es zu schrumpfen nach unten.

Wie übertrage ich die Werte zur Größenänderung von 1836 x 3264 -> 739 x 1162?

Quelle

2013-03-03 Philip Kirkbride

Dies sollte helfen: http: // Stackoverflow. com/questions/2303690/resizing-ein-Bild-in-html5-Leinwand – bfavaretto

Was Sie haben, sieht richtig aus, so dass Sie irgendwo nach einem Tippfehler suchen könnten.

[Edit: zusätzliche Gedanken]: Ist Ihr Bild wirklich 1836x3264 und nicht 3264x1836]

Hier arbeitet Code und eine Fiddle. http://jsfiddle.net/m1erickson/MLGr4/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    img=new Image(); 
    img.onload=function(){ 
     canvas.width=400; 
     canvas.height=300; 
     ctx.drawImage(img,0,0,img.width,img.height,0,0,400,300); 
    } 
    img.src="http://www.onestopwebmasters.com/wp-content/uploads/2011/06/eitai-bridge.jpg"; 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=100 height=100></canvas> 
</body> 
</html>

Quelle

2013-03-04 02:30:02 markE

Danke Code war richtig. Es war nur ein Fehler in der Handhabung des Canvas-Systems durch das Mobiltelefon. –

@PhilipKirkbride Können Sie uns sagen, was dieser Handyfehler war und wie Sie ihn repariert haben, bitte? – palsch

Diese Antwort half mir zu erkennen, dass ich 'canvas.style.width' und' height' anstatt 'canvas.width' gesetzt habe. Dadurch wurde die 'ctx.drawImage'-Skalierung wie erwartet verbessert, anstatt die Dehnung durchzuführen, bevor die Zeichenfläche selbst über Dimensionsattribute verfügte. – crowjonah

drawImage und die Größe auf Leinwand

Antwort

Verwandte Themen