imgのsrcをイメージに変換してフォルダに保存するにはどうすればよいですか？

Question

私は現在、ユーザがモーダル画面から画像をトリミングし、そのデータとしてcanvasを用いimg要素にトリミングされた画像を通過することを可能にするページに取り組んでいます。 imgのsrc属性はdata:image/png:base64 ...で始まる文字のこのランダムな束を持っています。私は何をしたい私は最終的に/ SAVEを打つ私の登録フォームでを送信すると、この画像は、新しい画像ファイルに変換し、指定したフォルダに保存されるということです。例えば

$(document).ready(function() { 
    $uploadCrop = $('#cb').croppie({ 
     enableExif: true, 
     viewport: { 
      width: 250, 
      height: 250, 
      /*type: 'circle'*/ 
     }, 
     boundary: { 
      width: 300, 
      height: 300 
     } 
    }); 

    $('#file1').on('change', function() { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      $uploadCrop.croppie('bind', { 
       url: e.target.result 
      }).then(function(){ 
       console.log('jQuery bind complete'); 
      }); 
     } 
     reader.readAsDataURL(this.files[0]); 
    }); 

    //THIS OPENS A MODAL SCREEN THAT ALLOWS THE CROPPING OF SELECTED IMAGE 
    $('#cropBtn').on('click', function(e) { 
     $uploadCrop.croppie('result', { 
      type: 'canvas', 
      size: 'viewport' 
     }).then(function (canvas) { 
      // This is the code that passes the result to another image file which will then be used to produce a new image file to save in to the directory for a particular user account profile photo. 
      $('.profilePic').attr('src', canvas); 
     }); 
    }); 
}); 

Answer 1

：

$data = 'iVBORw0KGgoAAAANSUhEUgAAABwAAAASCAMAAAB/2U7WAAAABl' 
     . 'BMVEUAAAD///+l2Z/dAAAASUlEQVR4XqWQUQoAIAxC2/0vXZDr' 
     . 'EX4IJTRkb7lobNUStXsB0jIXIAMSsQnWlsV+wULF4Avk9fLq2r' 
     . '8a5HSE35Q3eO2XP1A1wQkZSgETvDtKdQAAAABJRU5ErkJggg=='; 
$data = base64_decode($data); 

$im = imagecreatefromstring($data); 
if ($im !== false) { 
    header('Content-Type: image/png'); 
    imagepng($im); 
    imagedestroy($im); 
} 
else { 
    echo 'An error occurred.'; 
}