Question

我的问题与this thread的问题非常相似。我正在创建一个canvas元素，向它添加一个或多个img元素，然后将每个img依次发布到服务器上的php脚本，然后保存生成的文件。这是图像的基本拖放操作，就像Facebook或G +上的那样。我有一切正常工作除了，上传和保存产生的文件都是空的 - 或者说，它们每个2kb，只显示黑色。

以下是代码的相关部分： HTML：

    <form method="post" action="upload.php" id="formUpload">
    <div id="op">
        <label class="lbl">Drop images here to add them,<br>or click an image to see it enlarged</label>
        <span style='display:inline-block'>
            <input type="file" name="files[]" id='file' class="fileUpload" onchange="startRead()" multiple><br>
            <input type='submit' name='submit' value='+' class="fileUpload">
        </span>
    </div>
</form>

（不打扰CSS，因为它与此没有密切关系）

的javascript / jquery的：

function addImg(imgSrc) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();

    imageObj.onload = function() {
        context.drawImage(imageObj, 5, 5);
    };

    imageObj.className = "imgThumbnail";

    imageObj.style.width = 140 + "px";
    imageObj.style.height = 140 + "px";

    imageObj.src = imgSrc.currentTarget.result;
    var dataURL = canvas.toDataURL();

    $.ajax({
        type: "POST",
        url: "upload.php",
        data: { 
           imgBase64: dataURL
        }
    }).done(function(data) {
        var fileName = data;
        if (fileName.substring(1,1) !== "!") {
            document.getElementById('op').insertBefore(imageObj);
            $("#op").on('click', 'img', imgEnlarge);
            $.get($("#path").val() + "/includes/addImage.php", {
                imageType: $("#imageType").val(),
                idParentObject: $("#idParentObject").val(),
                url: fileName
            });        
        } else {
            alert("Error in upload processs.  Could not save " + data.substring(2, data.length-1) + ".");
            imageObj.attr("src", "../images/missing.png");
        }
    });   
}

PHP：

define('UPLOAD_DIR', '../images/');

$img = $_POST["img"];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);

$data = base64_decode($img);

$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file,$data);

print $success ? $file : '!$file';

任何帮助弄清楚我缺少的东西将不胜感激。正确的答案将更加受到赞赏。

Answer 1

知道了。这是一个操作顺序错误。在将图像绘制到其上之前，我发布了画布的base64表示。以下是javascript的修正内容：

function addImg(imgSrc) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();

    imageObj.className = "imgThumbnail";

    imageObj.style.width = 140 + "px";
    imageObj.style.height = 140 + "px";

    imageObj.src = imgSrc.currentTarget.result;
    context.drawImage(imageObj, 0, 0, 140, 140);

    var dataURL = canvas.toDataURL('image/png');                

    $.ajax({
        type: "POST",
        url: $("#path").val() + "/includes/upload.php",
        data: { 
           img: dataURL
        }                    
    }).done(function(data) {
        var fileName = data;
        if (fileName.substring(1,1) !== "!") {
            document.getElementById('op').insertBefore(imageObj);
            $("#op").on('click', 'img', imgEnlarge);
            $.get($("#path").val() + "/includes/addImage.php", {
                imageType: $("#imageType").val(),
                idParentObject: $("#idParentObject").val(),
                url: fileName
            });   
            $("#testOutput").val(data);
            $("#testOutput").show();
        } else {
            alert("Error in upload processs.  Could not save " + data.substring(2, data.length-1) + ".");
            imageObj.attr("src", "../images/missing.png");
        }
    });   
}

base64图像发布到php导致空文件

1 个答案: