3

我正在制作一个将在 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() 是。

我绝不是专家级的程序员，但我不想走到这一步却没有完成。因此，任何帮助都会非常感激！谢谢。

4

1 回答 1

4

看起来你忘记剪断数据 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;
于 2013-08-21T11:15:14.230 回答