Question

嘿，我对JavaScript很陌生。我试图用JavaScript获取图像并使用PHP保存。我找到了这个很棒的图像编辑器https://github.com/blueimp/JavaScript-Load-Image但是对于像我这样的初学者来说文档并不是很清楚。我能够加载和裁剪照片。但我不知道我将如何保存已编辑的照片。这是我的HTML代码：

   <form method="post" action="" enctype="multipart/form-data">
 <input type="file" accept="image/jpg, image/jpeg, image/gif, image/png, image/bmp" id="file-input-cover" name="file_upload_cover">
  <p id="actions_cover" style="display:none;">
     <button  class="btn button-stripes btn-default" type="button" id="edit_cover">Edit</button>
     <button  class="btn button-stripes btn-default" type="button" id="crop_cover">Crop</button>
  </p>
  <div id="result_cover" class="result">
      <p></p>
  </div>
    <input class="btn btn-default" type="submit" name="create" value="Onuruna Sayfa Aç" />
</form>

基本PHP：

if (isset($_POST["create"])) { $page->add_photo($_FILES['file_upload_profile']); }

和JS：

<script type="text/javascript">
  document.getElementById('file-input-profile').onchange = function (e) {
      loadImage(
          e.target.files[0],
          function (img) {
              document.body.appendChild(img);
          },
          {maxWidth: 600} // Options
      );
  };
</script>

如何获取已编辑的照片并使用php保存？

Answer 1

如果我认为您需要的是有人上传照片而您想将其保存在您的网站上。

这样的事情应该起作用

它从表单中获取图像，检查文件格式，并将其存储在相应的文件夹中（在www.site.com/fotossavedfromwebsite中）

它还会在使用灯箱上传后立即显示图片。

<?php $thisPage ="Fotos";?>
<?php
if(!ob_start("ob_gzhandler")) ob_start();
error_reporting(0);
include("./login/include/session.php");
global $database;
$config = $database->getConfigs();
function uploadImage($img_ff, $dst_path, $dst_img){

//Get variables for the function.
        //complete path of the destination image.
$dst_cpl = $dst_path . basename($dst_img);
        //name without extension of the destination image.
$dst_name = preg_replace('/\.[^.]*$/', '', $dst_img);
        //extension of the destination image without a "." (dot).
$dst_ext = strtolower(end(explode(".", $dst_img)));

//Check if destination image already exists, if so, the image will get an extra number added.
while(file_exists($dst_cpl) == true){
    $i = $i+1;
    $dst_img = $dst_name . $i . '.' . $dst_ext;
    $dst_cpl = $dst_path . basename($dst_img);
}

    //upload the file and move it to the specified folder.
move_uploaded_file($_FILES[$img_ff]['tmp_name'], $dst_cpl);

    //get type of image.
$dst_type = exif_imagetype($dst_cpl);

    //Checking extension and imagetype of the destination image and delete if it is wrong.
if(( (($dst_ext =="jpg") && ($dst_type =="2")) || (($dst_ext =="jpeg") && ($dst_type =="2")) || (($dst_ext =="gif") && ($dst_type =="1")) || (($dst_ext =="png") && ($dst_type =="3")) || (($dst_ext == "PNG") && ($dst_type == "2"))) == false){
    unlink($dst_cpl);
    die('<p>The file "'. $dst_img . '" with the extension "' . $dst_ext . '" and the imagetype "' . $dst_type . '" is not a valid image. Please upload an image with the extension JPG, JPEG, PNG or GIF and has a valid image filetype.</p>');
}
}
    //Script ends here.


// Needed for the function:

    // If the form is posted do this:
if($_SERVER['REQUEST_METHOD'] == 'POST'){

        //Variables needed for the function.
    $img_ff = 'image';// Form name of the image
    $dst_img = strtolower($_FILES[$img_ff]['name']); // This name will be given to the image. (in this case: lowercased original image name uploaded by user).
    $selected_radio = $_POST['location'];
    if($selected_radio == 'New York')
    {
        $dst_path = 'uploaded_files/newyork/'; // The path where the image will be moved to.
    }
    else if($selected_radio == 'All')
    {
        $dst_path = 'uploaded_files/all/';
    }
    uploadImage($img_ff, $dst_path, $dst_img);
}
?>
<?PHP include ("menu.php");?>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link rel="stylesheet" href="css/lightbox.css" media="screen"/>
    <div id="splash-wrap">
        <div class="container">
            <div class="main-wrap">
                <div id="content-section">
<?php if($session->logged_in){
    echo '
<form enctype="multipart/form-data" name="image" method="post" action="america">
<label for="image"><span style="color:#fff">Choose an image to upload:</span></label>
<input style="color:#fff;" type="file" id="image" name="image" value="Choose File" />
<br />
<input type="submit" value="Upload" />&nbsp;<input type="reset" value="Reset" /><br>
<input type="radio" name="location" value="New York"><span style="color:#fff"> New York</span><br>
<input type="radio" name="location" value="All"><span style="color:#fff"> All</span>    <br>
</form>';

Echo '<span style="color:#fff; font-size:30px;">Own Shots</span><br />';
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
echo '<span style="color:#fff; font-size:25px;">Your image has been uploaded!<br>    </span>';
}
$dir = './uploaded_files/all/';
$files = scandir($dir);
rsort($files);
foreach ($files as $file) {
if ($file != '.' && $file != '..') {
    echo '<a href="' . $dir . $file .'" data-lightbox="Uploaded" title="'. $file .'">            <img src="' . $dir . $file . '" width="150" height="150"/></a>';
}
}
    //foreach(glob('./uploaded_files/all/*.*') as $filename){
   // $skimmed = substr($filename, 17);

// echo $skimmed . "<br>";
//}
echo '<span style="color:#fff; font-size:30px;">Images in and around New York<br>    </span>';
$dir = './uploaded_files/newyork/';
$files = scandir($dir);
rsort($files);
foreach ($files as $file) {
if ($file != '.' && $file != '..') {
    echo '<a href="' . $dir . $file .'" data-lightbox="Uploaded" title="'. $file .'"><img src="' . $dir . $file . '" width="150" height="150"/></a>';
}
}
} else
{ 
echo '<h1>Please <a href="../login/main" style="text-decoration:none;     color:#B3B3B3;">login!</a></h1><br> To see my photo\'s';
}
?>


                </div>
            </div>
        </div><!-- end splash-wrap --> 

    </div><!-- end container -->
</div><!-- end header-wrap -->

Answer 2

这个库基本上创建了一个包含图像的canvas元素。您应该可以按照以下步骤进行保存：

1）将画布图像转换为base64格式：

var imageData = img.toDataURL();

2）使用ajax发送到服务器：

$.ajax({
  type: "POST",
  url: "yourPhpScript.php",
  data: {
     imgBase64: imageData
  }
}).done(function(e) {
  console.log('saved');
});

3）将base64数据保存在服务器上：

$imgInBinary = base64_decode($_POST['imgBase64']);

上述步骤可能包含一些错误，但它应该让您对该过程有一个很好的理解

Answer 3

图像临时存储在系统管理的目录中。如果您不将它们移动到保存目录，它们将被系统删除。

可以通过系统分配的数组键访问图像。您必须通过此数组键获取图像并将它们移动到存储目录。

看看这个： http://www.php.net/manual/en/function.move-uploaded-file.php

特别是“示例＃1上传多个文件”。

使用JavaScript获取img并使用PHP保存

3 个答案: