將 JPEG 從 html5 畫布保存到服務器時出現問題

Question

我在 HTML 畫布包裝器中加載到瀏覽器中的圖像。

<canvas id="image1" class="" width="213" height="213" style="width: 213px; height: 213px;"></canvas>

當我嘗試通過 AJAX 將其保存到服務器時，它工作正常，但是當文件是 JPEG 時，它不會從 AJAX 重定向。

這是我的 ajax

var imageName = $('#image_name').val();
var canvas = document.getElementById('image1');

var dataURL = canvas.toDataURL();       
$.ajax({
    type: "POST",
    url: "script.php",
    data: { 
            imgBase64: dataURL                          
        }
    }).done(function(data) {
        alert(data);
       window.location.replace("http://****.co.uk/dither/step3.php?id="+data)
    });

這是我的 php

<?php
define('UPLOAD_DIR', 'images/');
$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
echo $file;
?>

如果圖像是 png 文件，則重定向有效，但如果它是 JPEG，它只會返回到同一頁面。

如果我在 ajax 調用之前提醒“dataURL”，它會返回一個數組，第一部分為“data:image/png;base64”，無論文件擴展名是什么類型。

我對 base64 的了解不夠，無法解決這個問題。

Answer 1

由於 javascript 是異步的，ajax 在文件上傳完成之前就被觸發，這就是它失敗的原因。

Answer 2

使用此代碼示例從字符串創建創建圖像，這將解決問題

imagecreatefromstring($n) then imagejpeg($r,$y) or imagepng($r,$y);

和

imagedestroy($r);