php - 将 Canvas 和表单发送到服务器以自定义名称保存图像

Question

我正在尝试将 Canvas 图像发送到服务器。

大家好，我知道这个问题已经被问了很多。 (我已经问过一次了)

表单数据也被发送，这用于命名发送到服务器的文件，以便识别谁绘制了图像。

我的网站是here !

HTML

 <form action="PHPtestupload.php" method="post">
      Name <input type="text" name="name" value="" style="width:230px;  margin-left: -160px; font-size:1em; "/>

      Email <input type="email" name="email" value="" style="width:230px;  margin-top: 12px; margin-left: -160px; font-size:1em; "/>


      <input type="submit" onclick="postImagePlusForm();" value="Submit" style=" opacity:1; -webkit-appearance: none; width:100px; height:50px; margin-left: -50px;">
    </form>

JS

      // sends image to server
// serialize your canvas
var dataURL=document.getElementById('colors_sketch').toDataURL(image/png);

// serialize your form
var str = $("form").serializeArray();

// wrap both in an object
var package={ formData: str, imageDataURL: dataURL }




// ajax it
postImagePlusForm();

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

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)

}

替代 PHP 在网页上使用不同的 Javascript，具有半工作站点 here !

我认为服务器关闭了 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');


        $name = $_POST['name'];
        $email = $_POST['email'];
        $target = 'test.png';
        $newName = $name . $email;
        rename($target, $newName);

Answer 1

试试这个:

$dataURL = $_POST["imageDataURL"];
$dataURL = str_replace('data:image/png;base64,', '', $dataURL);
$dataURL = str_replace(' ', '+', $dataURL);
$image = base64_decode($dataURL);
$filename = 'newImage.png';
file_put_contents('path/to/' . $filename, $image);

此外，在您的 Javascript 中，您遗漏了 .toDataURL

中的引号

var dataURL = document.getElementById('colors_sketch').toDataURL('image/png');

---更新---

在您的情况下，图像数据实际上并未传递到您的上传处理程序 (PHPtestuplaod.php)，因为提交表单会导致页面重定向。因此，一个可能的解决方法是:

HTML

<!-- add this inside your form. 
     this will be used to carry the image data into
     the upload handler -->
<input type="hidden" name="imageData" id="imageData" />

jQuery

$("form").submit(function(e) {
  // let's prevent the default behavior for now,
  // so that we'll have time to include the image data
  e.preventDefault();

  // get the canvas image data
  var imageData = document.getElementById("colors_sketch").toDataURL("image/png");

  // let the hidden field we added earlier carry the image data into the upload handler
  $("#imageData").val(imageData);

  // submit the form
  $(this).submit();
});

PHP

$dataURL = $_POST["imageData"];
$dataURL = str_replace('data:image/png;base64,', '', $dataURL);
$dataURL = str_replace(' ', '+', $dataURL);
$image = base64_decode($dataURL);
$filename = 'newImage.png';
file_put_contents('path/to/' . $filename, $image);

您可能想要删除 AJAX 调用，因为现在不需要它。