画布中的 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;