drawImage ve Tuvalin

için yeniden boyutlandırmak Ben bir resim x 3264 Ben bu aşağıdaki gerçekleştirilebilir düşündüm belgeleri okuduktan sonra tuval ve 739 x 1162drawImage ve Tuvalin

için yeniden boyutlandırmak drawImage() istiyorum 1836:

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

Ben de denedim:

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

ikisi de sadece küçük bir tam görüntünün parçasını yerine aşağı küçülen gösteriyor.

1836 x 3264 -> 739 x 1162 arasında yeniden boyutlandırmak için değerlerden nasıl geçebilirim?

kaynak

2013-03-03 Philip Kirkbride

Bu yardımcı olacaktır: http: // stackoverflow. com/questions/2303690/resizing-an-image-in-an-html5-kanvas – bfavaretto

Doğru gördükleriniz için yazım hatası olan bir yeri bir kez daha kontrol edebilirsiniz.

[Düzenleme: Ek düşünce]: Resminiz mi gerçekten 1836x3264 ve 3264x1836 değil]

İşte çalışıyor kod ve bir 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>

kaynak

2013-03-04 02:30:02 markE

Teşekkürler kodu doğruydu. Cep telefonu sisteminin tuvali nasıl taşıdığı sadece bir aksaklıktı. –

@PhilipKirkbride Bu cep telefonu aksaklığının ne olduğunu ve nasıl düzelteceğinizi bize anlatabilir misiniz, lütfen? – palsch

Bu yanıt, 'canvas.width' yerine canvas.style.width ve height olarak ayarlandığımı fark etmeme yardımcı oldu. 'Ctx.drawImage' ölçeklemesinin, tuvalin kendisinin boyut öznitelikleri olmadan önce yaptığı gerilmeden ziyade beklendiği gibi işlenmesine yardımcı olan değiştirme. – crowjonah

cevap

İlgili konular