Question

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

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

所以我决定打开一个新主题并删除旧主题。

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

Firefox behaviour

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

Chrome behaviour

如果我只是绘制图像，则会显示图像，而不进行任何裁剪：

context.drawImage(imageObj, 0, 0);

但是如果我尝试使用所有需要的值（ sourceWidth = 1800 ）的裁剪功能（在html5canvastutorials.com上解释），我在画布中看不到图像。有趣的是，如果我将 sourceWidth 更改为 400 或更低的低值，则会绘制图像。 imageObj.onload不会改变任何内容，也不会改变原始图像大小（例如 600x900 ）或画布的宽度

Answer 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。

画布图像裁剪问题。图像太大了吗？

1 个答案: