3

キャンバス画像をサーバーに送信しようとしています。

こんにちは、私はこれが多く聞かれていることを知っています。（以前にも一度質問したことがあります）

フォームデータも送信され、これはサーバーに送信されるファイルに名前を付けて、誰が画像を描いたかを識別できるようにするために使用されます。

私のサイトはこちら！

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)

}

Web ページで別の Javascript を使用する代替 PHP。半作業サイトはこちら!

PHPはローカルでは機能するが、オンラインでは機能しないため、サーバーは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);
4

1 に答える 1

9

これを試して：

$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 呼び出しを削除することをお勧めします。

于 2013-04-24T17:12:09.940 に答える