drawImage e ridimensionare a Canvas

Ho un'immagine che è 1836 x 3264 voglio drawImage() su tela e ridimensionare a 739 x 1162.drawImage e ridimensionare a Canvas

Dopo aver letto la documentazione ho pensato che questo potrebbe essere realizzato con il seguente:

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

ho anche provato:

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

Entrambe mostrano solo una piccola parte dell'immagine piena invece di restringimento verso il basso.

Come passare attraverso i valori per ridimensionare da 1836 x 3264 -> 739 x 1162?

fonte

2013-03-03 Philip Kirkbride

Questo dovrebbe aiutare: http: // StackOverflow. it/questions/2303690/resizing-an-image-in-an-html5-canvas – bfavaretto

Quello che hai sembra corretto, quindi potresti ricontrollare un errore di battitura da qualche parte.

[Edit: pensiero aggiuntivo]: è la tua immagine davvero 1836x3264 e non 3264x1836]

codice Qui sta lavorando e un violino:. 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>

fonte

2013-03-04 02:30:02 markE

Il codice grazie era giusto. Era solo un problema nel modo in cui il sistema di telefonia mobile gestiva la tela. –

@PhilipKirkbride Puoi dirci che cos'è questo problema tecnico del telefono cellulare e come lo hai risolto, per favore? – palsch

Questa risposta mi ha aiutato a capire che stavo impostando 'canvas.style.width' e' height' piuttosto che 'canvas.width'. Il cambiamento ha aiutato il rendering in scala di 'ctx.drawImage' come previsto, piuttosto che lo stretching che stava facendo prima che il canvas stesso avesse attributi di dimensione. – crowjonah

drawImage e ridimensionare a Canvas

risposta

Problemi correlati