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!
With the help of @ArcanisGK507, I began to review the properties of the graph and I came across that, in itself, the library grants some properties to make an animation (of the bars in elevation) starting from the bottom and ending up to the place where they should arrive by values determined within it. I've removed the animation and removed another property called bezierCurve , to avoid making borders on this bar system. The modified code was only in the chart options: