1

昨天，我已经问过一个关于这个问题的问题。然而，我不知道问题是什么。今天我知道它是关于 drawImage 命令中的 sourceWidth 的：

context.drawImage(imageObj, sourceX, sourceY, sourceWidth,
        sourceHeight, destX, destY, destWidth, destHeight);

所以我决定开一个新话题，删除旧话题。

但让我从头开始：我正在尝试在历史文档上实现自制的“缩放功能”（见下图）。它在 Firefox 中运行良好，但在任何其他浏览器中都没有。

火狐行为

在 Chrome 或 Internet Explorer 中，它看起来像这样。缩放区域为空。

铬行为

显示图像，如果我只是绘制它，没有任何裁剪：

context.drawImage(imageObj, 0, 0);

但是，如果我尝试将裁剪功能（在 html5canvastutorials.com 中解释）与所有需要的值（sourceWidth = 1800）一起使用，我无法在画布中看到图像。有趣的是，如果我将sourceWidth更改为400或更低的低值，则会绘制图像。AnimageObj.onload不会改变任何东西，以及原始图像大小（例如600x900）或画布宽度的适应。

4

1 回答 1

1

我已经找到了解决我的问题的方法。这是关于sourceWidth和 的destX。我认为这是一个微不足道的问题，但我不知道这种情况。这是关于以下命令：

context.drawImage(imageObj, sourceX, sourceY, sourceWidth,
        sourceHeight, destX, destY, destWidth, destHeight);

您必须确保imageWidth - destX = sourceWidth，如果 sourceWidth 更大，Chrome、IE ... 不会绘制您的图像。我不知道为什么 Firefox 可以应付它。

这是一个数值示例： imageWidth = 1024，您要切断左侧的 200px，所以destX = 200和sourceWidth < 824。

于 2012-05-01T20:49:35.860 回答