Javascript Darkroomjs图像裁剪发布到PHP

有人知道如何使用darkroomjs将裁剪后的图像发布到PHP吗

链接此处：

我想将裁剪后的图像上传到服务器。另外，如何设置裁剪图像的位置以显示在不同的HTML元素中

例如，当我点击darkroomjs中的裁剪按钮时，它会用新图像更新裁剪器画布。我如何使它也将裁剪的图像移动到页面上的另一个HTML元素

---

提前感谢。

理论上，为了将图像发布到PHP，您需要将

内容的
src
内容放到某个隐藏字段中。从这一点上，您可以使用诸如或之类的工具在服务器上根据Base64数据创建映像文件

在您的情况下，通过抓取
异步发送它可能是最简单的

$('#theForm').submit(function(event){
     // preventDefault stops the regular synchronous submit from happening -- we don't want that. we want an async AJAX request
     event.preventDefault();

    var formData = $('#yourImgElement').attr('src');
    var returnMessage = '';

    $.post(site+'post/to/location', formData, function(response){
        if(response.status){
             returnMessage = 'Save Successful.';
        } else {
             returnMessage = 'Save Failed:\n\n';

             for (i = 0; i < response.errors.length; i++) { 
                  returnMessage += '- ' + response.errors[i] + '\n';
             }
        }

        alert(returnMessage);

     },'json');

     return false; // return false to cancel form action
  });

但是，在编辑图像后移动图像时应小心。如果插件希望某些元素位于某些位置，它可能会抛出JavaScript错误

使用解决方案更新：

=========================

图像的
src
永远不会更改。为了获得编辑图像的Base64代码，您实际上需要向画布索取它。以下是您如何做到这一点：

// Plugins options
plugins: {
  crop: {
    //minHeight: 300,
    //minWidth: 400,
    //ratio: 4/3
  },
  save: {
      callback: function() {
          this.darkroom.selfDestroy(); // Turn off the bar and cleanup
          var newImage = dkrm.canvas.toDataURL();
          varThatStoresYourImageData = newImage;
      }
  }
}

我有一个工作版本的这个-我花了一个小时左右的时间来找出和窃取一些其他人的建议混合在一起，在这里，那里和这里读了一些东西

我从php（$（“#profile_pic_filename'）.val（）；）弹出的隐藏输入类型将文件名从html解析为JavaScript

在我的ajax文件中，我获取图像并解码图像的base64版本，然后将其解析为一个具有filname的函数，该函数随后覆盖原始文件，并在服务器上替换图像

$newImage  = '';
$imageName = '';
if(isset($_POST['newImage'])){
    $newImage = $_POST['newImage'];
}
if(isset($_POST['imageName'])){
    $imageName = $_POST['imageName'];
}
function saveProfilePic($filename,$filecontent){
    if (strlen($filename)>0){
        $folderPath = '/home/xxxxxxxxxxxxx/public_html/images/uploads/_mem_photo/';
        if (!file_exists($folderPath)) {
            mkdir($folderPath);
        }
        $file = @fopen($folderPath.$filename,"w");
        if($file != false){
            fwrite($file,$filecontent);
            fclose($file);
            return 1;
        }
        return -2;
    }
    return -1;
}
$data  = explode(',',$newImage);
$final = base64_decode($data[1]);
$fileSavingResult = saveProfilePic($imageName, $final);
if($fileSavingResult == 1){
    $return = array("status"=>"success", "data"=>"File was saved!");
} 
else if($fileSavingResult == -2){
    $return = array("status"=>"fail", "data"=>"An error occured during saving file!");
} 
else if($fileSavingResult == -1){
    $return = array("status"=>"fail", "data"=>"Wrong file name!");
}
echo json_encode($return);

我刚刚将xxxxx放入文件路径，因为我不想放弃任何服务器信息

如果全部成功，您将重新加载页面，并在页面上加载新转换的图像，但如果出现错误，它将提醒您

if($('.image-container.target').length){
    $('#member_portrait').change(function(){
        $('#member_photo_hidden_file').val("");
    });
    var pic_name = $('#profile_pic_filename').val();
    var dkrm = new Darkroom('#target', {
      // Size options
      minWidth: 100,
      minHeight: 100,
      maxWidth: 600,
      maxHeight: 500,
      ratio: 4/3,
      backgroundColor: '#000',
      // Plugins options
      plugins: {
        //save: false,
        crop: {
          quickCropKey: 67, //key "c"
          //minHeight: 50,
          //minWidth: 50,
          //ratio: 4/3
        },
        save: {
              callback: function() {
                  this.darkroom.selfDestroy(); // Cleanup
                  var newImage = dkrm.canvas.toDataURL();
                  $.ajax({
                    type     : "POST",
                    dataType : "html",
                    url      : base_url+'ajax/updateProfilePic',
                    data     : { 
                        'newImage'  : newImage,
                        'imageName' : pic_name
                    }
                })
                .done(function(response){
                    response   = $.parseJSON(response);
                    var status = response.status;
                    var data   = response.data;
                    if(status === "success"){
                        location.reload();
                    }else{
                        alert(data);
                    }
                });
              }
          }
      },
      // Post initialize script
      initialize: function() {
        var cropPlugin = this.plugins['crop'];
        // cropPlugin.selectZone(170, 25, 300, 300);
        cropPlugin.requireFocus();
      }
    });
}

$newImage  = '';
$imageName = '';
if(isset($_POST['newImage'])){
    $newImage = $_POST['newImage'];
}
if(isset($_POST['imageName'])){
    $imageName = $_POST['imageName'];
}
function saveProfilePic($filename,$filecontent){
    if (strlen($filename)>0){
        $folderPath = '/home/xxxxxxxxxxxxx/public_html/images/uploads/_mem_photo/';
        if (!file_exists($folderPath)) {
            mkdir($folderPath);
        }
        $file = @fopen($folderPath.$filename,"w");
        if($file != false){
            fwrite($file,$filecontent);
            fclose($file);
            return 1;
        }
        return -2;
    }
    return -1;
}
$data  = explode(',',$newImage);
$final = base64_decode($data[1]);
$fileSavingResult = saveProfilePic($imageName, $final);
if($fileSavingResult == 1){
    $return = array("status"=>"success", "data"=>"File was saved!");
} 
else if($fileSavingResult == -2){
    $return = array("status"=>"fail", "data"=>"An error occured during saving file!");
} 
else if($fileSavingResult == -1){
    $return = array("status"=>"fail", "data"=>"Wrong file name!");
}
echo json_encode($return);