Darkroomjs图像裁剪后到PHP

我有一个工作版本-我花了一个小时左右的时间来弄清楚，并偷了一些其他人的建议将它们混合在一起，并在这里和那里更改了一些位，这里是…

我从php ($('#profile_pic_filename').val();)填充的隐藏输入类型中将文件名解析为JavaScript

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();
      }
    });
}

在我的ajax文件中，我取图像并解码图像的base 64版本，然后将其解析为带有文件名的函数，然后覆盖原始文件，然后在服务器上替换图像。

$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放在文件路径中，因为我不想放弃任何服务器信息。

如果一切都是成功的，你得到一个页面重新加载和新转换的图像加载到页面上，但如果有一个错误，它会提醒你。

理论上，为了将图像发布到PHP，您需要获得<img>元素的src内容，该元素在此插件的情况下存储在Base64中。

一旦你抓住值使用JQuery，你可以发送它到服务器异步使用AJAX或通过张贴你的形式通过把src内容到一个隐藏字段的地方的常规方式。从那时起，您可以使用诸如PHP的GD和Image函数或Intervention/Image之类的工具，根据Base64数据在服务器上创建图像文件。

在您的情况下，通过抓取<img src="base64img">异步发送它可能是最简单的。

$('#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
  });

这是我的理解，裁剪图像并保存它应该反映Base64中的变化，但我个人和其他人实际上有问题。

为了做你想做的其他事情，你应该能够用JQuery很容易地做到这一点(查找重构DOM)。只需挂钩到事件:

// Post initialization method
initialize: function() {
    // Active crop selection
    this.plugins['crop'].requireFocus();
    // Add custom listener
    this.addEventListener('core:transformation', function() { 
         // THIS IS WHERE YOU WOULD THEN PERFORM DOM MANIPULATIONS USING JQUERY
     });
  }

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

UPDATED WITH SOLUTION:

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

图像的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;
      }
  }
}