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

昨天，我已经就这个问题提出了一个问题。然而，我不知道问题出在哪里。今天，我知道这是关于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或更低，则会绘制图像。

imageObj.onload

不会改变任何东西，也不会改变原始图像大小（如600x900）或画布宽度的调整

我已经找到了解决问题的方法。它是关于

sourceWidth

和

destX

的。我认为这是一个小问题，但我不知道这种情况。它是关于以下命令的：

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

您必须确保

imageWidth-destX=sourceWidth

，如果sourceWidth更大，则Chrome，即。。。不会画出你的图像。我不知道为什么Firefox可以应付它

以下是一个数值示例：

---

imageWidth=1024

，您想切断左侧的200px，因此

destX=200

和

sourceWidth<824

我已经找到了解决问题的方法。它是关于

sourceWidth

和

destX

的。我认为这是一个小问题，但我不知道这种情况。它是关于以下命令的：

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

您必须确保

imageWidth-destX=sourceWidth

，如果sourceWidth更大，则Chrome，即。。。不会画出你的图像。我不知道为什么Firefox可以应付它

以下是一个数值示例：

---

imageWidth=1024

，您要切断左侧的200px，因此

destX=200

和

sourceWidth<824

请避免大行，添加换行符。请避免大行，添加换行符。