I’m trying to save the divin image to hosting in javascript but it saves as a blank image

I want to save the image of the div as an image to the hosting with javascript bottleCanvas, it puts the image in a div, but when I want to save it as an image file, it saves it as an empty image. How can I solve this problem?

index.php:

var bottleCanvas = document.getElementById('kanepe');
var dataURL = bottleCanvas.toDataURL("image/png");
var anchor = document.createElement('a');
anchor.href = dataURL;
anchor.download = 'screenshot.png';
anchor.innerHTML = '<img width="100" height="100" src=' + dataURL + '>download';
document.getElementById('output').appendChild(anchor);
                
                
    $.ajax({
        url: "upload.php",
        type: "POST",
        data: 'image=' + dataURL,
        success: function(cikti2){
            alert(cikti2);
        }
    })

upload.php:

if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {    

    // get the dataURL
    $dataURL = $_POST["image"];  

    // the dataURL has a prefix (mimetype+datatype) 
    // that we don't want, so strip that prefix off
    $parts = explode(',', $dataURL);  
    $data = $parts[1];  

    // Decode base64 data, resulting in an image
    $data = base64_decode($data);  

    // create a temporary unique file name
    $file = "resimler/" . uniqid() . '.png';

    // write the file to the upload directory
    $success = file_put_contents($file, $data);

    
    print $success ? $file : "Unable to save this image."; 
}