使用自定义名称将canvas和表单发送到服务器保存图像

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

大家好，我知道这已被问过很多。 （我之前已经问了一次）

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

我的网站在这里 ！

HTML

 Name  Email    

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，半工作站点在这里 ！

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

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调用，因为现在不需要它。