Captura de canvas HTML como gif / jpg / png / pdf?

É possível capturar ou imprimir o que é exibido em uma canvas html como uma imagem ou pdf?

Eu gostaria de gerar uma imagem via canvas, e ser capaz de gerar um png a partir dessa imagem.

Oops A resposta original foi específica para uma pergunta semelhante. Isto foi revisado:

var canvas = document.getElementById("mycanvas"); var img = canvas.toDataURL("image/png"); 

com o valor em IMG, você pode escrever como uma nova imagem assim:

 document.write(''); 

O HTML5 fornece o Canvas.toDataURL (mimetype) que é implementado no Opera, Firefox e Safari 4 beta. No entanto, há várias restrições de segurança (principalmente relacionadas ao desenho de conteúdo de outra origem na canvas).

Então você não precisa de uma biblioteca adicional.

por exemplo

    

Teoricamente, isso deve criar e, em seguida, navegar para uma imagem com um quadrado verde no meio dela, mas não testei.

Pensei em ampliar um pouco o escopo dessa questão, com algumas dicas úteis sobre o assunto.

Para obter a canvas como uma imagem, você deve fazer o seguinte:

 var canvas = document.getElementById("mycanvas"); var image = canvas.toDataURL("image/png"); 

Você pode usar isso para gravar a imagem na página:

 document.write(''); 

Onde “image / png” é um tipo mime (png é o único que deve ser suportado). Se você quiser uma matriz dos tipos suportados, você pode fazer algo nos seguintes termos:

 var imageMimes = ['image/png', 'image/bmp', 'image/gif', 'image/jpeg', 'image/tiff']; //Extend as necessary var acceptedMimes = new Array(); for(i = 0; i < imageMimes.length; i++) { if(canvas.toDataURL(imageMimes[i]).search(imageMimes[i])>=0) { acceptedMimes[acceptedMimes.length] = imageMimes[i]; } } 

Você só precisa executar isso uma vez por página – ele nunca deve mudar durante o ciclo de vida de uma página.

Se você deseja fazer com que o usuário baixe o arquivo à medida que ele é salvo, você pode fazer o seguinte:

 var canvas = document.getElementById("mycanvas"); var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); //Convert image to 'octet-stream' (Just a download, really) window.location.href = image; 

Se você estiver usando isso com diferentes tipos MIME, certifique-se de alterar ambas as instâncias de image / png, mas não a imagem / octeto-stream. Também vale a pena mencionar que, se você usar resources de vários domínios para renderizar sua canvas, ocorrerá um erro de segurança ao tentar usar o método toDataUrl.

 function exportCanvasAsPNG(id, fileName) { var canvasElement = document.getElementById(id); var MIME_TYPE = "image/png"; var imgURL = canvasElement.toDataURL(MIME_TYPE); var dlLink = document.createElement('a'); dlLink.download = fileName; dlLink.href = imgURL; dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':'); document.body.appendChild(dlLink); dlLink.click(); document.body.removeChild(dlLink); } 

Eu usaria ” wkhtmltopdf “. Apenas funciona muito bem. Ele usa o mecanismo do webkit (usado no Chrome, Safari, etc.) e é muito fácil de usar:

 wkhtmltopdf stackoverflow.com/questions/923885/ this_question.pdf 

É isso aí!

Tente

Aqui está alguma ajuda se você fizer o download através de um servidor (dessa forma você pode nomear / converter / pós-processar / etc seu arquivo):

toDataURL dados usando toDataURL

-Set os headers

 $filename = "test.jpg"; //or png header('Content-Description: File Transfer'); if($msie = !strstr($_SERVER["HTTP_USER_AGENT"],"MSIE")==false) header("Content-type: application/force-download");else header("Content-type: application/octet-stream"); header("Content-Disposition: attachment; filename=\"$filename\""); header("Content-Transfer-Encoding: binary"); header("Expires: 0"); header("Cache-Control: must-revalidate"); header("Pragma: public"); 

-criar imagem

 $data = $_POST['data']; $img = imagecreatefromstring(base64_decode(substr($data,strpos($data,',')+1))); 

-export imagem como JPEG

 $width = imagesx($img); $height = imagesy($img); $output = imagecreatetruecolor($width, $height); $white = imagecolorallocate($output, 255, 255, 255); imagefilledrectangle($output, 0, 0, $width, $height, $white); imagecopy($output, $img, 0, 0, 0, 0, $width, $height); imagejpeg($output); exit(); 

ou como PNG transparente

 imagesavealpha($img, true); imagepng($img); die($img); 

Outra solução interessante é o PhantomJS . É um script WebKit sem header com JavaScript ou CoffeeScript.

Um dos casos de uso é a captura de canvas: você pode capturar de forma programática o conteúdo da Web, incluindo SVG e Canvas e / ou Criar capturas de canvas do site com a visualização de miniaturas.

O melhor ponto de input é a página wiki de captura de canvas .

Aqui está um bom exemplo para o relógio polar (de RaphaelJS):

 >phantomjs rasterize.js http://raphaeljs.com/polar-clock.html clock.png 

Você quer renderizar uma página em um PDF?

 > phantomjs rasterize.js 'http://en.wikipedia.org/w/index.php?title=Jakarta&printable=yes' jakarta.pdf 

Se você estiver usando jQuery, o que muitas pessoas fazem, então você implementaria a resposta aceita da seguinte forma:

 var canvas = $("#mycanvas")[0]; var img = canvas.toDataURL("image/png"); $("#elememt-to-write-to").html(''); 

Você pode usar jspdf para capturar uma canvas em uma imagem ou pdf assim:

 var imgData = canvas.toDataURL('image/png'); var doc = new jsPDF('p', 'mm'); doc.addImage(imgData, 'PNG', 10, 10); doc.save('sample-file.pdf'); 

Mais informações: https://github.com/MrRio/jsPDF

Em algumas versões do Chrome, você pode:

  1. Use a function de imagem de desenho ctx.drawImage(image1, 0, 0, w, h);
  2. Clique com o botão direito na canvas