0

嗨，我需要将表单数据与画布图像一起提交。然后使用该表单数据命名保存在服务器上的文件。我刚刚开始掌握 PHP，所以任何帮助都会很棒。

这是我的工作示例，它将相同的命名文件保存到服务器。

HTML

 <form action="name.php" method="post">
        Name: <input type="text" name="fname">
        Age: <input type="text" name="age">
        <input type="button" onclick="saveImage();formSubmit();" value="Submit form">
 </form>

JS

function saveImage(){
var xmlhttp;
xmlhttp=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        //do something with the response
    }
}
xmlhttp.open("POST","upload.php",true);
var oldCanvas = document.getElementById('colors_sketch').toDataURL("image/png");
var img = new Image();
img.src = oldCanvas;
xmlhttp.setRequestHeader("Content-type", "application/upload")
xmlhttp.send(oldCanvas);

}

PHP

$data = file_get_contents('php://input');

$canvasImg = imagecreatefrompng($data);
$width  = imagesx($canvasImg);
$height = imagesy($canvasImg);

$outImg = imagecreatetruecolor($width, $height);
$color = imagecolorallocatealpha($outImg, 255, 255, 255, 127);
imagefill($outImg, 0, 0, $color);
imagecopy($outImg, $canvasImg, 0, 0, 0, 0, $width, $height);

imagepng($outImg, 'test.png');
4

2 回答 2

2

以下是将您的表单和图像发送到 upload.php 的步骤

首先创建一个要发送的数据包，其中包含您的序列化图像和表单。这里我使用jquery来序列化你的表单（或者不用jquery自己序列化）。

// serialize and concatenate both form and canvas image
var package=$("form").serialize() + "&imageDataURL="+canvas.toDataURL();

然后使用 AJAX 将其发布到您的 PHP 服务器：

// ajax it
postImagePlusForm();

function postImagePlusForm(){
    $.ajax({  
        type: "POST",  
        url: "upload.php",  
        data: package,  
        success: function(value) {  
            // ...we have success!
        }
    });
}

最后捕获它并在 php 中处理它：

<?php 
if ( isset($_POST["imageDataURL"]) && !empty($_POST["imageDataURL"]) ) {    
    // create $dataURL
    $dataURL = $_POST["imageDataURL"];  
    // Extract base64 data
    // we have an unneeded header, zap it
    $parts = explode(',', $dataURL);  
    $data = $parts[1];  
    // Decode
    $data = base64_decode($data);  
    // Save
    $fp = fopen('newImage.png', 'w');  
    fwrite($fp, $data);  
    fclose($fp); 
}
if ( isset($_POST["formData"]) && !empty($_POST["formData"]) ) {    
    $formData = $_POST['formData'];
    foreach ($formValue as $x) {
        // do whatever you need to do with each form value ($x)
    }
}
于 2013-04-22T20:07:40.043 回答
0

这个问题在 SO 上被问了很多次。

我已经在这里回答了同样的问题： https ://stackoverflow.com/a/13198699/1090562

简而言之，这可以通过这个来实现，更多细节 - 阅读链接

$.ajax({
  type: "POST",
  url: "script.php",
  data: { 
     imgBase64: canvas.toDataURL();
  }
}).done(function(o) {
  console.log('saved');
});
于 2013-04-22T20:23:01.160 回答