php - 来自 Canvas 的无效 base64 字符串

Question

我正在制作一个将在 iPad 上使用的网络应用程序。将邀请用户为图像着色。我为此使用 html5 Canvas 并将着色基于 tutorial I found HERE .最后，我想将这张图片连同用户名上传到数据库。

我是怎么做到的

当用户完成着色后，他点击“保存”，我使用 toDataURL() 转换 Canvas 。然后我将数据插入到一个不可见的表单元素中并提交表单以转到新页面。像这样:

    document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
    document.forms["form1"].submit();

在这里我询问用户的姓名和电子邮件。我还将 Canvas 数据插入到一个新的不可见表单元素中。像这样:

    value="<?php echo $_POST['my_hidden'];?>"

然后我将此表单提交到下一个 php 页面上的数据库。 Canvas 数据存储在 Blob 中。

一切正常。

出了什么问题

当我尝试在最后一页上显示图像时，我在图像上收到“加载资源失败”错误(“kCFErrorDomainCFNetwork 错误”)。我试图以这种方式显示它:

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var image = new Image();

    image.src = "<?php echo str_replace("\n", "", $_POST['canvas']); ?>";
    ctx.drawImage(image, 0, 0);

现在我怀疑我从服务器上得到的 Canvas 数据可能是坏的。所以我这样检查:

    if ( base64_encode(base64_decode($canvas)) === $canvas){
       echo '$data is valid';
    } else {
       echo '$data is NOT valid';
    }

事实上，它是无效的。然后我用同样的方法在第一个表格之后检查它，然后它已经无效了。所以我想要么是通过那个隐藏字段的第一次提交搞砸了，要么是 toDataURL() 搞砸了。

我绝不是专业的程序员，但我不想走到这一步而不完成这个。所以任何帮助都将是真正的，非常感谢!谢谢。

Answer 1

看起来您忘记剪掉数据 URI 的开头而只留下数据

var uri = canvas.toDataURL('image/png'),   // data:image/png;base64,blahblahblah
    b64 = uri.slice(uri.indexOf(',') + 1); // blahblahblah
document.getElementById('my_hidden').value = b64;