i got a problem on my website www.gucustom.cards I use html2canvas.hertzen.com to make a screenshot of an HTML part. Local everything works fine. On the live site, by clicking on the button to make the ajax call, it shows a 403 Error for the POST send PHP file.
I checked if PHP is working find on the Server and yes it is. Also max size and upload size is 512M. I tried to call the PHP page withpout the html2canvas part / without the base64URL and that was working as well. The problem seems to be this part "data: {image: base64URL}" When i send an empty data string there is no 403 error anymore.
$("#cardgeneratorForm").on("submit", function (event) {
event.preventDefault();
html2canvas(document.getElementById('card-build-inner')).then(function(canvas) {
// Get base64URL
var base64URL = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
// AJAX request
$.ajax({
url: 'generatecard.php',
method: 'POST',
data: {image: base64URL},
success : function(data){
$('#outputcardlink').val(data);
},
fail: function(){
$('#outputcardlink').val('Error! Please try again.');
}
});
});
});
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
$image = $_POST['image'];
$location = "card/";
$image_parts = explode(";base64,", $image);
$image_base64 = base64_decode($image_parts[1]);
// Filename
$timestamp = time();
$random1 = rand(10, 99);
$random2 = rand(10, 99);
$filename = $random1.$timestamp.$random2.'.png';
$file = $location.$filename;
file_put_contents($file, $image_base64);
http_response_code(200);
echo "https://gucustom.cards/card/".$filename;
}
else
{
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "Error!";
}
?>
I need help to send the base64URL to the PHP page without the 403 error, maybe i miss some ajax infos to send.