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 = 200sourceWidth < 824

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