如何將img的src轉換爲圖像並保存到文件夾？

Question

我目前正在製作一個頁面，允許用戶從模態屏幕上裁剪圖像，並使用canvas作爲其數據將裁剪後的圖像傳遞給img元素。 img的src屬性擁有以data:image/png:base64 ...開頭的隨機字符串。我想要做的是當我最終在我的註冊表單中點擊SAVE/提交時，此圖像將被轉換爲新的圖像文件並保存到指定的文件夾。

這裏是我用剪裁圖像並傳遞給img元素的代碼：

$(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.'; 
}