畫布圖像裁剪問題。圖像是否太大？

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。