画布图像裁剪问题。图像是否太大？

Question

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

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

所以我descided打开一个新的话题，并删除旧的。

但让我从头开始︰ 我试图在历史文档上实现自制的“缩放功能”（见下图）。它在Firefox中正常工作，但不会在任何其他浏览器中使用。

Firefox behaviour

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

Chrome behaviour

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

context.drawImage(imageObj, 0, 0); 

但是，如果我尝试使用裁切功能（在html5canvastutorials.com解释）提供一切必要的值（sourceWidth = 1800），我无法在画布中看到图像。 有趣的是，如果我将sourceWidth更改为较低值，如或更低，则绘制图像。一个imageObj.onload没有任何改变，以及所述原始图像大小的适配（例如，为了600x900）或宽度画布的。

Answer 1

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

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

你必须确保imageWidth - destX = sourceWidth，如果sourceWidth更大，浏览器，IE浏览器...不会画你的形象。我不知道为什么Firefox可以应付它。

这里是一个数值例子： imageWidth = 1024，要切断左侧200像素，所以destX = 200和sourceWidth < 824。