php - キャンバスをフォームで送信し、PNG を作成して名前を付けます

Question

フォーム情報とともにキャンバス画像をサーバーに送信するつもりです。これにより、フォームからの情報で名前が付けられた PNG が保存されます。

現時点では、書き込まれた PNG は開くことができず、0 kb のごちゃごちゃしたファイルです。

サイト全体はこちら

HTML - 情報を書き込み、送信時に JavaScript を有効にするフォーム

<form action="PHPtestupload.php" method="post">
  Name <input type="text" name="name" value="" style="width:230px;  margin-left: -160px; font-size:1em; "/>
  Email <input type="email" name="email" value="" style="width:230px;  margin-top: 12px; margin-left: -160px; font-size:1em; "/>

  <input type="submit" onclick="postImagePlusForm();" value="Submit" style=" opacity:1; -webkit-appearance: none; width:100px; height:50px; margin-left: -50px;">
</form>

JS

    // sends image to server
    // serialize your canvas
    var dataURL=document.getElementById('colors_sketch').toDataURL('image/png');

    // serialize your form
    var str = $("form").serializeArray();

    // wrap both in an object
    var package={ formData: str, imageDataURL: dataURL }




    // ajax it 
    postImagePlusForm();

    function postImagePlusForm(){
    $.ajax({  
     type: "POST",  
     url: "PHPtestupload.php",  
     data: package,  
     success: function(value) {  
        // ...we have success!
    }
   });
  }

PHP

    $dataURL = $_POST["imageDataURL"];
    $dataURL = str_replace('data:image/png;base64,', '', $dataURL);
    $dataURL = str_replace(' ', '+', $dataURL);
    $image = base64_decode($dataURL);
    $filename = 'newImage.png';
    file_put_contents('image/' . $filename, $image);

    $name = $_POST["formData"];
    $target = 'newImage.png';
    rename($target, $newName);