2015-02-24 14 views
8

Ich versuche, ein externes SVG-Symbol in base64 zu konvertieren. Es funktioniert in allen Browsern außer Firefox, die den Fehler "NS_ERROR_NOT_AVAILABLE" auslösen.firefox svg canvas drawImage Fehler

 var img = new Image(); 
     img.src = "icon.svg"; 

     img.onload = function() { 
      var canvas = document.createElement("canvas");    
      canvas.width = this.width; 
      canvas.height = this.height; 
      var ctx = canvas.getContext("2d"); 
      ctx.drawImage(this, 0, 0); 
      var dataURL = canvas.toDataURL("image/png"); 
      return dataURL; 
     }; 

Kann mir bitte jemand weiterhelfen? Danke im Voraus.

+0

Hat Ihr Svg-Symbol Attribute für Breite und Höhe? Wenn ja, sind sie Prozentsätze? –

+0

Hallo Robert, das ist eine Svg-Datei nicht ein Svg-DOM-Element und wir können jede Breite/Höhe zuweisen. Ich verwende dieses Svg in der Seite als Aneesh

+0

Das beantwortet meine Frage nicht. Hat icon.svg Attribute width/height für das Root-Element ''. Wenn dies der Fall ist, sind diese Attributwerte Prozentsätze? –

Antwort

15

Firefox unterstützt nicht das Zeichnen von SVG-Bildern auf Canvas, es sei denn, die Svg-Datei hat Attribute width/height im Stamm <svg> Element und diese Breite/Höhe Attribute sind keine Prozentsätze. Dies ist ein longstanding bug.

Sie müssen die Datei icon.svg so bearbeiten, dass sie die oben genannten Kriterien erfüllt.

+0

Vielen Dank Robert !! Es klappt!! :) – Aneesh

+0

Vorsicht, um einen Link zu diesem Fehler zu veröffentlichen? Es wäre interessant, den Fortschritt zu verfolgen. – tivoni

+0

@tivoni Ich habe einen Link hinzugefügt, aber es wird keinen Fortschritt geben, bis w3c definiert, was passieren soll. –