drawImage i rozmiaru do płótnie

Mam obrazu, który jest 1836 x 3264 Chcę drawImage() na płótnie i rozmiar do 739 x 1162.drawImage i rozmiaru do płótnie

Po zapoznaniu się z dokumentacją i pomyślałem, że to może być wykonane z następujących czynności:

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

próbowałem również:

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

Oba pokazują tylko niewielką część pełnego obrazu zamiast kurczy się go w dół.

Jak przejść przez wartości, aby zmienić rozmiar z 1836 x 3264 -> 739 x 1162?

Źródło

2013-03-03 Philip Kirkbride

To powinno pomóc: http: // stackoverflow. com/questions/2303690/zmiana rozmiaru-obrazu-in-an-html5-canvas – bfavaretto

To, co macie, wygląda dobrze, więc możecie sprawdzić gdzieś literówkę.

[Edit: dodatkowa myśl]: Czy Twój obraz i nie naprawdę 1836x3264 3264x1836]

kod tutaj pracuje i 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>

Źródło

2013-03-04 02:30:02 markE

Kod z podziękowaniami był prawidłowy. To tylko usterka w sposobie obsługi płótna przez system telefonów komórkowych. –

@PhilipKirkbride Czy możesz nam powiedzieć, co to za usterka telefonu komórkowego i jak to naprawiłeś? – palsch

Ta odpowiedź pomogła mi zrozumieć, że ustawiałem 'canvas.style.width' i' height' zamiast 'canvas.width'. Zmiana, która pomogła renderować skalowanie 'ctx.drawImage' zgodnie z oczekiwaniami, zamiast rozciągania, które wykonywał, zanim płótno miało atrybuty wymiarów. – crowjonah

drawImage i rozmiaru do płótnie

Odpowiedz

Powiązane problemy