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/

一样

它有效，但由于图片尺寸不同，我无法手动设置画布的width =“”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

如何根据图片的大小设置html5画布的图像宽度和高度？

1 个答案: