upload image dengan canvas

tanya gan:

ane punya coding

Html:

<button id="download_image" class="button small-btn primary-btn upgradeBtn">Download</button>

javascript

<script type="text/javascript">
$("#download_image").click(function(e) {
        e.preventDefault();
        image = canvas.toDataURL();
            $.ajax({
                type: 'POST',
                url: "/save-leader-board",
                contentType: "application/json;",
                dataType: "json",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    imgBase64: image,
                },
                success: function(data) {
                    alert(data.d);
                },
                error: function(data){
                    alert("fail");
                }
            })
    });
</script>

php.

<?php
$image = $request->imgBase64;  // your base64 encoded
        $image = str_replace('data:image/png;base64,', '', $image);
        $image = str_replace(' ', '+', $image);
        $imageName = str_random(10).'.'.'png';
        \File::put(storage_path(). '/images/' . $imageName, base64_decode($image));
?>

created image di storage berhasil tapi tampilan nya seperti file image corrupt

mohon pencerahnnya gan