Você pode converter o canvas para imagem e depois enviar via "raw"
Para converter o conteúdo para imagem, precisamos acessar a função toDataUrl do canvas. Ela irá servir para transformar o objeto em um base64.
Por padrão, você receberá uma imagem em PNG
, porém, nada imagem que você possa escolher entre JPEG
ou WEBP
, por exemplo.
Outra que você também precisa ter em mente, é que por padrão, o jQuery.ajax tenta converter os dados para application/x-www-form-urlencoded
e não queremos isso. Queremos apenas enviar o conteúdo da imagem. Para isso devemos marcar como false
, durante a configuração do jQuery.ajax.
Segue um exemplo para auxiliar o entendimento.
Front-end:
<h1 id="welcome">Hello Brazil!</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" type="text/javascript"></script>
<script>
html2canvas( [ document.body ], {
onrendered: function( canvas ) {
$.ajax({
url: 'index2.php',
type: 'POST',
data: canvas.toDataURL(), // Captura a imagem em base64
contentType: 'image/png', // Informa o mime-type da imagem que por padrão é PNG
processData: false //Informa ao jQuery.ajax para não converter os dados em application/x-www-form-urlencoded
});
}
});
</script>
Back-end:
Como não sei o andamento do projeto, serei breve na parte de back-end.
Primeiro, devemos capturar esse POST RAW
. No PHP
fazemos isso passando o parâmetro php://input
na função file_get_contents
Depois basta utilizar a função str_replace para substituir o mime-type que é adicionado ao converter de canvas para base64
.
Feito isso, você terá sua imagem para utilizar em seu projeto.
Segue código para exemplificar.
<?php
$imageEncoded = str_replace("data:image/png;base64,", "", file_get_contents("php://input"));
$imageDecoded = base64_decode($imageEncoded);
// Salva a imagem
file_put_contents("image_screenshot.png", print_r($imageDecoded, true));