从文件中绘制图像时，画布到 base64 不起作用答案

【问题标题】：Canvas to base64 does not work when drawing image from file从文件中绘制图像时，画布到 base64 不起作用
【发布时间】：2014-08-30 22:12:07
【问题描述】：

我正在将图像从文件绘制到 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);

【问题讨论】：

只是想知道 - 你希望 $("body").change(".uploadfile", function () { 做什么？
这只是文件输入 <input id="uploadfile" class="uploadfile" name="profile_pic" type="file"> 上的一个侦听器，当用户选择文件并加载和验证文件时，它会调用 loadImageFile() 函数...
好吧，它不是针对那个班级的，如果这就是你的想法的话。 .change() 不希望参数中的选择器像 .on() 可能：api.jquery.com/change - 我不认为这是你问题的根源，我只是说
它是，.change 触发良好...这有效，它不是我的问题的根源...只是我从画布获得的数据总是相同的，空白的 240x240 PNG 图像我不知道为什么？！
我知道它是，但它不会触发 only 类“uploadfile”的元素 - 它会触发任何触发change 事件的元素。 change (".uploadfile") 的第一个参数被用作您可以在处理程序中获取的事件数据。它没有被用作选择器。我只是指出处理程序不是专门针对.uploadfile，它针对任何东西

标签： javascript php html5-canvas

【解决方案1】：

根据@Ian 的评论回答我自己的解决方案。该表单正在提交空画布，因为它是在 Image.onload 完成在画布上绘制之前提交的。

Image.onload 完成后提交表单需要更改。这是更新的代码：

$('#btn-profile-update').click(function(e) {
    if($('.crop-img').length)
    {
        $("canvas").remove();
        $('#form_profile').after('<canvas id="profile-pic-canvas" width="240" height="240" id="canvas"/>');
        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);
            $('#form_profile').append($(input));
            $('#form_profile').submit();
        }
    }
    else
    {
        $('#form_profile').submit();
    }
});

【讨论】：