昨天,我已经问过一个关于这个问题的问题。然而,我不知道问题是什么。今天我知道它是关于 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)或画布宽度的适应。