2009-03-11 10 views
5

J'ai donc besoin de sauvegarder les données d'image dessinées sur un élément <canvas>. Et il y a la méthode toDataURL() qui fonctionne dans le navigateur le plus moderne. Sauf ... vous l'avez deviné ... Internet Explorer.Internet Explorer toDataURL() alternative?

J'ai cherché sur internet mais partout les gens disent que je devrais utiliser SVG/VML pour enregistrer les données, mais ils mentionnent jamais comment. Je n'ai aucune expérience avec SVG/VML dans IE alors comment sauvegarder une image dessinée dans un élément canvas dans Internet Explorer? Est-ce que quelqu'un a de l'expérience?

Au moment, je devais dupliquer le code de dessin sur le client et sur le serveur qui commence à se compliquer. Donc, s'il y a un moyen que je pourrais extraire l'image dessinée sur l'étiquette de toile sur le côté client (ou serveur) qui aurait certainement aider.

Merci!

Répondre

1

Vous pourriez être en mesure d'obtenir le VML et même, mais qui est un format XML, c'est donc probablement pas ce que vous voulez. Il n'est pas possible d'obtenir une image d'IE sans utiliser de plug-in.

+1

est-il un moyen facile de convertir le VML à un bmp ou .png? –

3
  1. canvas.toDataURL fonctionne dans IE9.

  2. Si vous avez vraiment besoin pour IE vieux .. bien .. Je vais vous donner un devis

toDataURL ne sera pas pris en charge en raison de la nature de la méthode utilisée par Explorer Canvas: VML. Nous n'avons pas trouvé de moyen de pixelliser les images VML en bitmap en utilisant JS, et pas même avec un script côté serveur. Donc, si vous avez vraiment besoin de toDataURL dans IE, vous devrez utiliser FxCanvas (http://code.google.com/p/fxcanvas/) ou FlashCanvas (http://flashcanvas.net/): deux solutions basé sur Flash.

http://code.google.com/p/explorercanvas/issues/detail?id=77

2

J'ai eu le même problème. Ce que je voulais faire était de convertir la toile en une image, puis l'ouvrir dans un nouvel onglet. J'ai trouvé que la conversion n'était pas le problème, mais l'ouverture d'un nouveau lien était. Je l'ai résolu en générant l'image, en la plaçant dans une balise img, puis en l'incluant dans la nouvelle page. Je me suis alors dit d'ouvrir une nouvelle page à l'aide de ce tutoriel - http://www.javascripter.net/faq/writingt.htm

Voici ce que je faisais

var canvas = document.getElementById('canvas1'); 
var dataURL = canvas.toDataURL(); 
var width = parseInt($("#main").width()); //main is the div that contains my canvas 
var height = parseInt($("#main").height()); 
newWindow("<img src=\"" + dataURL + "\"/>"); 
function newWindow(content) { 
    top.consoleRef = window.open("", "Organisational Structure", 
     "width="+width+",height="+height 
     + ",menubar=0" 
     + ",toolbar=1" 
     + ",status=0" 
     + ",scrollbars=1" 
     + ",resizable=1") 
    top.consoleRef.document.writeln(
     "<html><head><title>Console</title></head>" 
     + "<body bgcolor=white onLoad=\"self.focus()\">" 
     + content 
     + "</body></html>" 
    ) 
    top.consoleRef.document.close() 
} 
+0

C'est une bonne solution de contournement de mon point de vue. La seule chose avec laquelle j'ai eu un problème était dans IE9, j'ai dû utiliser une chaîne vide comme second paramètre de window.open car l'utilisation de la valeur "Structure organisationnelle" a provoqué une erreur dans IE9. – MartynJones87