Pergunta

Então eu preciso para salvar dados de imagens tiradas em um elemento <canvas>. E há o método toDataURL () que funciona na maioria dos navegadores modernos.

exceto ... você adivinhou ... Internet Explorer.

Eu procurei na internet, mas em todos os lugares as pessoas dizem que eu deveria usar SVG / VML para salvar os dados, mas eles nunca mencionam como. Eu não tenho nenhuma experiência com SVG / VML no IE assim como faço para salvar a imagem tirada em um elemento de tela no Internet Explorer? Alguém tem experiência?

No momento, eu tinha que duplicar o código de desenho no cliente e no servidor que está começando a ficar complicado. Portanto, se há uma maneira que eu poderia extrair a imagem desenhada na tag canvas no cliente (ou servidor) lado que tinha certamente ajuda.

Obrigado!

Foi útil?

Solução

Você pode ser capaz de obter o VML e mesmo isso, mas isso é um formato XML, de modo que provavelmente não é o que você quer. Não há maneira você pode obter uma imagem do IE sem usar um plug-in.

Outras dicas

  1. canvas.toDataURL funciona no IE9.

  2. Se você realmente precisa dele para o velho IE .. bem .. eu vou apenas dar-lhe uma cotação

toDataURL não será suportado por causa da natureza do método utilizado por Explorador Canvas: VML. Nós não encontrar uma maneira de rasterizar VML para bitmap imagens usando JS, e nem mesmo com um script do lado do servidor. Então, se você realmente precisa toDataURL no IE, você terá que usar FxCanvas (Http://code.google.com/p/fxcanvas/) ou FlashCanvas (Http://flashcanvas.net/):. Duas soluções baseadas em flash

http://code.google.com/p/explorercanvas/ problemas / detalhes? id = 77

Eu tive o mesmo problema. O que eu queria fazer era converter a tela para uma imagem, em seguida, abri-lo em uma nova aba. Descobri que a conversão não era o problema, mas a abertura de uma nova ligação foi. Eu resolvi por gerar a imagem, colocando-o em uma tag img, então inclusive que na nova página. Eu, então, abriu disse nova página usando este tutorial - http://www.javascripter.net/faq/writingt htm

Aqui está o que eu fiz

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()
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top