2009-03-11 27 views
5

Necesito guardar los datos de imagen dibujados en un elemento <canvas>. Y está el método toDataURL() que funciona en la mayoría de los navegadores modernos.Internet Explorer toDataURL() alternativa?

Excepto ... lo adivinó ... Internet Explorer.

He buscado en Internet, pero en todas partes la gente dice que debo usar SVG/VML para guardar los datos, pero nunca mencionan cómo. No tengo ninguna experiencia con SVG/VML en IE, así que ¿cómo puedo guardar la imagen dibujada en un elemento canvas en Internet Explorer? ¿Alguien tiene experiencia?

Por el momento, tuve que duplicar el código de dibujo en el cliente y en el servidor que se está empezando a complicar. Entonces, si hay una manera de extraer la imagen dibujada en la etiqueta del lienzo en el lado del cliente (o del servidor) eso ciertamente ayudaría.

Gracias!

Respuesta

1

Es posible que pueda obtener el VML y lo mismo, pero eso es un formato XML, por lo que probablemente no sea lo que desea. No hay forma de que puedas obtener una imagen de IE sin usar un complemento.

+1

¿Hay una manera fácil de convertir el VML a un bmp o png? –

3
  1. canvas.toDataURL funciona en IE9.

  2. Si realmente se necesita para el viejo IE .. bueno .. me voy a darle una cotización

toDataURL no será compatible debido a la naturaleza del método utilizado por Lienzo Explorer: VML. No encontramos una forma de rasterizar VML a imágenes de mapa de bits usando JS, ni siquiera con una secuencia de comandos del lado del servidor. Por lo tanto, si realmente necesita DataURL en IE, deberá usar FxCanvas (http://code.google.com/p/fxcanvas/) o FlashCanvas (http://flashcanvas.net/): dos soluciones basado en Flash.

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

2

que tenían el mismo problema. Lo que quería hacer era convertir el lienzo en una imagen, luego abrirla en una nueva pestaña. Descubrí que convertirlo no era el problema, pero abrirlo en un nuevo enlace sí lo era. Lo resolví generando la imagen, poniéndola en una etiqueta img, y luego incluyéndola en la nueva página. Entonces se abrió dicha nueva página utilizando este tutorial - http://www.javascripter.net/faq/writingt.htm

Aquí es lo que hice

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

Esta es una gran solución desde mi punto de vista. La única cosa con la que tuve un problema fue en IE9, tuve que usar una cadena vacía como el segundo parámetro para window.open, ya que el uso del valor de "Estructura Organizativa" causó un error en IE9. – MartynJones87

Cuestiones relacionadas