来自画布的无效base64字符串

Question

我正在制作将在iPad上使用的Web应用程序。 将邀请用户为图像着色。 我为此使用html5 Canvas并将颜色基于我在这里找到的教程 。 最终，我想将此图像连同用户名一起上传到数据库。

我怎么做

当用户完成着色后，他单击“保存”，然后我使用toDataURL（）转换了画布。 然后，我将数据插入不可见的表单元素中，然后提交表单以进入新页面。 像这样：

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

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

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

然后，我将此表单提交到下一个php页面上的数据库。 画布数据存储在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);

现在我怀疑从服务器获取的画布数据可能不好。 所以我以这种方式检查了它：

    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;