Question

我有以下代码：

HTML

<img src="http://hollywoodteenonline.com/wp-content/uploads/2011/12/justin_bieber_someday_fragrance_dree_hemingway.jpg" id="imagem"/>

<canvas id="mycanvas">

CSS

#mycanvas{
  height:200px;
  width: 200px;
  border: solid;
  color: black;
}

#imagem{
  height:200px;
  width: 200px;
}

的Javascript

var canvas = document.getElementById("mycanvas"),
    ctx = canvas.getContext("2d"),
    img = document.getElementById("imagem");

ctx.drawImage(img,0,0);

正如您所看到的，画布不会跟进原始图像的大小调整。在编写代码时，它“应该”显示所有源，但调整大小到de指定画布。有没有办法解决这个问题？

Answer 1

问题

第一个问题是您没有使用其属性为canvas元素设置大小。这是影响画布的内容的唯一方式，而不是设置，这意味着无论您为CSS规则设置什么，它都默认为300 x 150像素。

第二个问题是您使用CSS来设置大小。这会影响元素本身，而不会影响画布的内容。从技术上讲，如果你想将画布缩放为图像，这没有错，但它不会对画布做任何事情，结果就是你只需缩放300x150像素。

第三个问题，如果图像大小不同于300x150，它将不适合画布（太小或者如果太大则会被裁剪）。

解决方案

一种解决方案是将画布的大小设置为图像的大小，并将图像绘制在：

canvas.width  = img.width;
canvas.height = img.height;

ctx.drawImage(img, 0, 0);

现在，您可以根据需要调整画布大小（使用CSS作为图像）。

或者您可以使用画布的大小缩放图像（删除CSS规则;您仍然需要为画布设置大小）：

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

<强> LIVE DEMO HERE

您还需要注意如何调用脚本。要使用画布处理图像，需要加载它们。当它们加载异步时，你需要以某种方式处理加载事件（即在这种情况下在window.onload内）。

画布不跟进图像的大小调整？

1 个答案:

问题

解决方案