如何設置HTML5 camvas的圖像的寬度和高度，根據到圖片的大小？

Question

我有下面的代碼。

它需要從數據庫中編碼圖片一些Base64和在HTML5畫布顯示它在屏幕上。

<?php 
$sql = "SELECT * FROM editor_picture"; 

$rs = $db->GetAssoc($sql); //Getting the result in an array 
$rs_array = array_values($rs); 
$count_files = count($rs_array); 
?> 

`<script type="text/javascript"> 

<?php for ($x = 0; $x < $count_files; $x++) { ?> 

    var canvas<?php echo $x; ?> = document.getElementById('canvas<?php echo $x; ?>'); 
    var context<?php echo $x; ?> = canvas<?php echo $x; ?>.getContext('2d'); 

    var img<?php echo $x; ?> = new Image();  
    img<?php echo $x; ?>.onload = function () { 
     context<?php echo $x; ?>.drawImage(this, 0, 0, img<?php echo $x; ?>.width, img<?php echo $x; ?>.height); 
    } 
//$rs_array[$x]['editor_picture_use_base64'] contains the base64 encoded string 
img<?php echo $x; ?>.src = "<?php echo str_replace(' ', '+', $rs_array[$x]['editor_picture_use_base64']); ?>"; 

<?php } ?> 
      </script> 


<?php 
for ($x = 0; $x < $count_files; $x++) { 
?> 
    <canvas id="canvas<?php echo $x; ?>" width="" height=""></canvas> 
<?php 
} 
?> 

就這樣http://jsfiddle.net/8fVvE/

它的工作原理，但由於圖片的大小不同，我不能設置寬度=「」 HEIGHT =「畫布」手動

我的問題是：

如何設置HTML5 camvas的圖像的寬度和高度，使其適合圖片的大小？

我寧願與本地JavaScript來做到這一點。但任何解決方案都可以。

Answer 1

剛剛成立時的圖像加載畫布的大小，但在繪製前。

您將要使用天然*的大小，因爲這反映了圖像的實際位圖大小：

img<?php echo $x; ?>.onload = function () { 
    var canvas = context<?php echo $x; ?>.canvas; 
    canvas.width = this.naturalWidth; 
    canvas.height = this.naturalHeight; 
    context<?php echo $x; ?>.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight); 
} 

的最後一個參數是真的沒有必要，你可以改爲做：

context<?php echo $x; ?>.drawImage(this, 0, 0); 

Updated fiddle