Domanda

Quindi devo salvare i dati delle immagini disegnati su un elemento <canvas>. E c'è il metodo toDataURL () che funziona nella maggior parte dei browser moderni.

Tranne ... hai indovinato ... Internet Explorer.

Ho cercato su Internet ma ovunque la gente dice che dovrei usare SVG / VML per salvare i dati, ma non menzionano mai come. Non ho alcuna esperienza con SVG / VML in IE, quindi come posso salvare l'immagine disegnata in un elemento canvas in Internet Explorer? Qualcuno ha esperienza?

Al momento, ho dovuto duplicare il codice di disegno sia sul client che sul server che sta iniziando a complicarsi. Quindi, se c'è un modo, potrei estrarre l'immagine disegnata sul tag canvas sul lato client (o server) che sarebbe sicuramente di aiuto.

Grazie!

È stato utile?

Soluzione

Potresti essere in grado di ottenere il VML e lo stesso, ma questo è un formato XML, quindi probabilmente non è quello che vuoi. Non è possibile ottenere un'immagine da IE senza utilizzare un plug-in.

Altri suggerimenti

  1. canvas.toDataURL funziona in IE9.

  2. Se ne hai davvero bisogno per il vecchio IE .. beh .. ti do solo un preventivo

  

toDataURL non sarà supportato a causa della natura del metodo utilizzato da   Explorer Canvas: VML. Non abbiamo trovato il modo di rasterizzare VML in bitmap   immagini usando JS, e nemmeno con uno script lato server. Quindi se tu   ho davvero bisogno di DataURL in IE, dovrai usare FxCanvas   (http://code.google.com/p/fxcanvas/) o FlashCanvas   (http://flashcanvas.net/): due soluzioni basate su Flash.

http://code.google.com/p/explorercanvas/ problemi / dettaglio? id = 77

Ho avuto lo stesso problema. Quello che volevo fare era convertire la tela in un'immagine, quindi aprirla in una nuova scheda. Ho scoperto che la conversione non era il problema, ma l'apertura in un nuovo collegamento era. L'ho risolto generando l'immagine, inserendola in un tag img, includendola poi nella nuova pagina. Ho quindi aperto la nuova pagina con questo tutorial: http://www.javascripter.net/faq/writingt htm

Ecco cosa ho fatto

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()
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top