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

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 に答える