2015-02-24 14 views
8

Sto provando a convertire un'icona svg esterna in base64. Funziona in tutti i browser ad eccezione di Firefox che genera un errore "NS_ERROR_NOT_AVAILABLE".firefox svg canvas drawImage error

 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; 
     }; 

qualcuno può aiutarmi su questo per favore? Grazie in anticipo.

+0

L'icona di svg ha attributi di larghezza e altezza? Se lo fa sono percentuali? –

+0

Ciao Robert, questo è un file svg non un elemento dom di svg e possiamo assegnargli qualsiasi larghezza/altezza. Sto usando questo svg nella pagina come Aneesh

+0

Questo non risponde alla mia domanda. Icon.svg ha attributi width/height sull'elemento '' radice. In caso affermativo, tali percentuali dei valori degli attributi? –

risposta

15

Firefox non supporta il disegno di immagini SVG su tela a meno che il file svg non abbia attributi larghezza/altezza sull'elemento radice <svg> e tali attributi larghezza/altezza non siano percentuali. Questo è un longstanding bug.

Sarà necessario modificare il file icon.svg in modo che soddisfi i criteri di cui sopra.

+0

Grazie mille Robert !! Funziona!! :) – Aneesh

+0

cura di inviare un collegamento a tale errore? Sarebbe interessante tenere traccia dei progressi della correzione – tivoni

+0

@tivoni Ho aggiunto un collegamento, ma non ci saranno progressi sul bug fino a quando w3c non definirà cosa dovrebbe accadere. –