I am creating a method to use the BASE64 encoding of an image in another file using a POST of a FORM.
My problem occurs when I receive the image from the POST on the other side of the file, where a significant reduction in size is shown and it can be seen that the data is not the same as it was before sending it through this method. I attach the image of what it looks like before and after:
And I leave below the code that I have used of the method and the graph that is shown in the previous image:
<form id="imagen" action="test2.php" method="POST">
<input id="canvasimg" name="canvasimg" type="text" value=""/>
<button type="submit">enviar</button>
</form> <!-- Aca se realiza el metodo POST para visualizar la imagen en otro sitio -->
<canvas id="canvasid"></canvas> <!-- Aca se forma el gráfico -->
<script>
new Chart(document.getElementById("canvasid"), {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
}); /* Aca estan las propiedades del gráfico */
$(document).ready(function(){
$("#canvasimg").attr("value", $("#canvasid").get(0).toDataURL("img/png"));
}); /* Este apartado sirve para crear la codificacion BASE64 y pasarla mediante el POST -->
</script>
EDIT:
Attached below is the code of the file where it receives the method:
<?php $canvasimg = $_POST['canvasimg'];
echo "<img src='$canvasimg'>";
?>
I appreciate any support or recommendation, thank you very much in advance!