javascript - Firefox drawImage tot Canvas 错误 : IndexSizeError: Index or size is negative or greater than the allowed amount

Question

我以前使用 Chrome，但我需要使用 Firefox 测试我的插件。我正在 try catch 视频元素并将其绘制到 Canvas 上。在 Chrome 中，一切正常，但在 Firefox 中，我遇到了这个烦人的错误，我还无法修复。

IndexSizeError: Index or size is negative or greater than the allowed amount

我正在使用以下代码行将视频 $("#video")[0] 绘制到 Canvas $("#output")[0]。 getContext('2d'):

outputCtx.drawImage(video, 0,0, video.width, video.height, 0, 0, 1815, 1358);

我会收到有关 video.width 和 video.height 值的错误。我制作了一个在 Chrome 中运行良好但在 Firefox 中出现错误的 JSFiddle:http://jsfiddle.net/ronnyrr/KD2bu/

Answer 1

尝试改用这些属性:

outputCtx.drawImage(video, 0,0, video.videoWidth, video.videoWeight,
                    0, 0, 1815, 1358);

源矩形必须始终在源位图中。当其中一个参数超出或为 0 或负数时，会出现错误消息。

在 Firefox 中，宽度可能无法反射(reflect)实际的视频大小。因此尝试 videoWidth/Height 属性，或者在最坏的情况下将它们结合起来:

outputCtx.drawImage(video, 0,0,
                    video.videoWidth||video.width,
                    video.videoHeight||video.height,
                    0, 0, 1815, 1358);

希望这对您有所帮助!