Firefox drawImage tot Leinwand-Fehler: IndexSizeError: Index oder die Größe ist negativ oder größer als die zulässige Menge

Habe ich bisher mit Chrome, aber ich musste mein test-plugin mit Firefox.
Ich versuche zu erfassen, das video-element und ziehen Sie es auf die Leinwand. In Chrome funktioniert alles einwandfrei, aber in Firefox bekomme ich diese lästige Fehlermeldung die ich nicht beheben kann noch. 

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

Ich bin mit dem folgenden code-Zeile zu ziehen, um zu video $("#video")[0] auf die Leinwand $("#output")[0].getContext('2d'):

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

Ich werde den Fehler auf dem video.Breite und video.die Werte für Höhe.
Ich habe ein JSFiddle, das funktioniert gut in Chrome, sondern gibt die Fehlermeldung in Firefox: http://jsfiddle.net/ronnyrr/KD2bu/

InformationsquelleAutor ronnyrr | 2014-04-10
  1. 1

    Versuchen, diese Eigenschaften statt:

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

    Den Quell-Rechteck muss immer innerhalb der Quell-bitmap. Die Fehlermeldung tritt auf, wenn einer der Parameter außerhalb oder 0 oder negativ ist.

    In Firefox kann es sein, dass die Breite nicht den tatsächlichen video-Größe. Deshalb versuchen die videoWidth - /Height-Eigenschaften oder im schlimmsten Fall kombinieren Sie:

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

    Hoffe, das hilft!

    • Vielen Dank für Ihre Antwort! Ich habe mich verändert Ihr Vorschlag (jsfiddle.net/ronnyrr/KD2bu/1) und jetzt bekomme ich nicht den Fehler mehr. Der Schnappschuss wird, aber für einige Grund, die Dimensionen sind viel zu groß (auch die width-und height-Attribute für das video-element sind korrekt) in beiden Browsern (Chrome und FF) ..
    InformationsquelleAutor
Schreibe einen Kommentar