Javascript HTML5画布：图像大小调整

我正在尝试在画布上放置图像，而不调整其大小。我原以为drawImage（img，x，y）可以做到这一点，但它会拉伸图像以填充画布。 另外，为drawImage（img、x、y、width、height）提供我的图像的尺寸似乎也不起作用

这是我的密码：

<canvas id="story" style="position:relative; width:800px; height:600px;"></canvas>

<script type="text/javascript">

window.onload = function() {
  var canvas = document.getElementById("story");
  var context = canvas.getContext("2d");
  var img = document.getElementById("img1");
  var width = parseInt(img.width);
  var height = parseInt(img.height);
  context.drawImage(img, 0, 0, width, height);
}

</script>
<img id="img1" alt="" src="http://link to image"/>

window.onload=函数（）{
var canvas=document.getElementById（“故事”）；
var context=canvas.getContext（“2d”）；
var img=document.getElementById（“img1”）；
var-width=parseInt（img.width）；
var height=parseInt（img.height）；
绘图图像（img，0，0，宽度，高度）；
}

提前谢谢

---

PS：我添加了parseInt以确保drawImage获得有效值。

不要使用CSS来调整画布的大小。这将创建默认大小的画布并拉伸它。直接在画布上设置画布尺寸，您将获得1到1像素的绘图空间

<canvas id="story" width="800" height="600" style="position:relative;"></canvas>

---

Trochoid是正确的，canvas标记上的style属性导致了问题。正如他所建议的，您可以在HTML中设置它，或者更好的是，您可以将其留空，并在JS中动态设置它：

<canvas id="story"></canvas>

<script type="text/javascript">

window.onload = function() {
      var canvas = document.getElementById("story");
      var context = canvas.getContext("2d");
      var img = document.getElementById("img1");
      var width = parseInt(img.width);
      var height = parseInt(img.height);

      canvas.height=height;
      canvas.width=width;
      context.drawImage(img, 0, 0);
}

</script>
<img id="img1" alt="" src="http://link to image"/>

window.onload=函数（）{
var canvas=document.getElementById（“故事”）；
var context=canvas.getContext（“2d”）；
var img=document.getElementById（“img1”）；
var-width=parseInt（img.width）；
var height=parseInt（img.height）；
画布。高度=高度；
画布。宽度=宽度；
drawImage（img，0,0）；
}

还要确保获得图像的宽度和高度，并在加载后绘制图像

img.onload = function () {
  var width = parseInt(img.width);
  var height = parseInt(img.height);
  context.drawImage(img, 0, 0, width, height);
};

---

您必须先完全加载函数图像，然后才能在屏幕上进行渲染，以便按照以下代码进行操作

<img id="demo-img" src="image_name.png">

<br>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3">Your browser does not support the HTML5 canvas tag
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("demo-img");
    img.onload=function fun(){ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width,img.height)}
 </script> 

您的浏览器不支持HTML5画布标记
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“demo img”）；
img.onload=函数fun（）{ctx.drawImage（img，0,0，img.width，img.height，0,0，img.width，img.height）}

尝试使用我最近创建的这个库，它可以加载图像，调整图像大小，固定宽度和高度或字体，转换为base64或blob等其他格式，并允许应用水印

var CanvaWork = new CanvaWork();

CanvaWork.loadImage("yourimage.png", function(obj){
    console.log(obj.canvas);  // The usable canvas
    console.log(obj.width);
    console.log(obj.height);
    console.log(obj.image); // Contains the image file
});

---

希望这对你有帮助

当我调用

drawImage

（在Firefox 3.6和Chrome 9中）时，它不会拉伸以填充画布。你能给我们展示一个例子（）吗？谢谢你的快速回答！救了我的星期五！非常感谢你这么做；我一直很头疼，想弄明白为什么尽管在drawImage（）中设置了正确的源和目标维度，但图像仍然会被绘制成不相称的样子！如果可以的话，我会给你100票！