小编Jor*_*nen的帖子

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

我绝不是一个专家程序员，但我不想走这么远而不完成它。因此，我们将非常感谢任何帮助！谢谢。

我正在使用JavaScript库为iPad和iPad构建一个简单的益智应用程序来拖放碎片.我无法弄清楚如何检查所有部件是否在正确的位置.

到目前为止我得到的是

// create the draggable puzzle piece
var p1=document.getElementById('piece1');
new webkit_draggable(p1);
p1.className = 'ps1';

// create an array to count the pieces placed correctly
var countArray = new Array();

// create the dropspot, link it to the puzzle piece and add an element to the array to count. Finally kill the dropspot
var p1p1 = webkit_drop.add('droppiece1',{accept : ['ps1'], onDrop : function(){countArray.push("a");webkit_drop.remove('droppiece1')}});


// piece has been placed correctly.
if(countArray.length = 1){
alert('Piece placed correctly');
};

我遇到的问题是来自计数功能的警报立即触发.我怎样才能解决这个问题？