从文件绘制图像时，画布到base64不能工作

我正在从文件绘制图像到HTML5画布。这幅画在画布上画得很好。当我把这个发送到PHP保存base64字符串到服务器时，我总是得到空图像…空图像只有在我将图像绘制到画布时，如果我绘制类似图像的东西，图像将保存为已绘制。

例如，这将提交给PHP和图像将保存到磁盘绘制…

var canvas = $("canvas")[0];
var context = canvas.getContext("2d"),
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
var dataURL = canvas.toDataURL();
var input = $("<input>").attr("type", "hidden").attr("name", "profile_pic_data").val(dataURL);
$("form").append($(input));

这个不会。此代码允许用户浏览图像文件并裁剪它。然后剪裁的图像被绘制到画布，这工作得很好，但当我把这个发送到PHP(与上面相同的方式)我总是得到空白图像(base64字符串也总是相同的，无论我选择和绘制的图像)?我几乎什么都试过了，我不知道我做错了什么……

function loadImageFile() {
    if (document.getElementById("uploadfile").files.length === 0) return;
    var e = document.getElementById("uploadfile").files[0];
    if (!rFilter.test(e.type)) {
        return
    }
    oFReader.readAsDataURL(e)
}
var one = new CROP;
$("body").on("click", ".newupload", function () {
    $(".uploadfile").click()
});
$("body").change(".uploadfile", function () {
    loadImageFile();
    $(".uploadfile").wrap("<form>").closest("form").get(0).reset();
    $(".uploadfile").unwrap()
});
oFReader = new FileReader, rFilter = /^(?:image'/bmp|image'/cis'-cod|image'/gif|image'/ief|image'/jpeg|image'/jpeg|image'/jpeg|image'/pipeg|image'/png|image'/svg'+xml|image'/tiff|image'/x'-cmu'-raster|image'/x'-cmx|image'/x'-icon|image'/x'-portable'-anymap|image'/x'-portable'-bitmap|image'/x'-portable'-graymap|image'/x'-portable'-pixmap|image'/x'-rgb|image'/x'-xbitmap|image'/x'-xpixmap|image'/x'-xwindowdump)$/i;
oFReader.onload = function (e) {
    $(".profile-pic").html('<div class="default"><div class="cropMain"></div><div class="cropSlider"></div></div>');
    one = new CROP;
    one.init(".default");
    one.loadImg(e.target.result);
}
$('#form_profile').submit(function(e) {
    var canvas = $("canvas")[0];
    var e = canvas.getContext("2d"),
        t = new Image,
        n = coordinates(one).w,
        r = coordinates(one).h,
        i = coordinates(one).x,
        s = coordinates(one).y,
        o = 240,
        u = 240;
    t.src = coordinates(one).image;
    t.onload = function () {
        e.drawImage(t, i, s, n, r, 0, 0, o, u);
    }
    var dataURL = canvas.toDataURL();
    var input = $("<input>").attr("type", "hidden").attr("name", "profile_pic_data").val(dataURL);
    $(this).append($(input));
});

这是我的PHP，它应该工作:

$upload_dir = DOCROOT.'assets/img/profile-pics/';
$img = $_POST['profile_pic_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir.$this->current_user->id.'.png';
$success = file_put_contents($file, $data);