Question

我正在制作一个可以在iPad上使用的网络应用程序。将邀请用户为图像着色。我正在使用html5 Canvas并在tutorial I found HERE上使用着色。最后，我想将此图像与用户名一起上传到数据库。

我是怎么做的

当用户完成着色时，他点击“保存”并使用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;

画布中的base64字符串无效

我是怎么做的

出了什么问题

1 个答案: