•  23-09-2019
  •  | 
  •  

Pergunta

Atualmente estou usando Canvas2Image para salvar o conteúdo da minha tela HTML5.No entanto, parece não funcionar no Google Chrome.Quaisquer ideias sobre como contornar o problema são bem-vindas.:)

Foi útil?

Solução

canvas.toDataURL() parece funcionar bem no Chrome, por isso pode ser um problema da biblioteca. A funcionalidade "Converter Canvas to Image" parece funcionar.

Outras dicas

Use este código

<html>
<head>
<script src="base64.js" type="text/javascript"></script>
<script src="canvas2image.js" type="text/javascript"></script>
</head>
<body>
<input type="button" id="savecanvas" value="Save Image" onclick="savecanvasfile()"/>
</body>
</html>



<script>
function savecanvasfile(){
    var canvas = document.getElementById('canvas_name');
    var context = canvas.getContext('2d');
    var strDataURI = canvas.toDataURL();
    Canvas2Image.saveAsPNG(canvas);
}
</script>

Faça o download desses canvas2Image.js e base64.js e salve -o na pasta local para o funcionamento deste código.

Estes estarão disponíveis no sitehttp://www.nihilogic.dk/labs/canvas2image/

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var strDataURI = canvas.toDataURL("image/png;base64");
document.write('<img src="'+strDataURI+'"/>');

Sim eu fiz!=)

Dê uma olhada em www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/CanvasBox.js?rev=239#ln1235.Você pode vê-lo funcionando http://www.thiagomata.com/codetodiagram/svn/experimental/canvasBox/classDiagram/classDiagram.html.

Para fazer com que a imagem não apareça no navegador, mas seja como um download, preciso criar este arquivo php simples: www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/download.php?rev=239

Preciso criar um close.html para o navegador não manter uma página about:blank após o início do download www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/close.html?rev=239

Provavelmente farei um grande post sobre isso no thiagomata.blog.com mas acho que com esses arquivos você já conseguirá encontrar o caminho.

Talvez, se você ler este post no futuro o link thiagomata.com possa ser quebrado pois em breve irei migrar esse projeto para o codetodiagram.com.

É isso!Thiago Mata

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top