Question

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

此处链接：https://github.com/MattKetmo/darkroomjs

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

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

提前致谢。

Answer 1

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

使用JQuery获取该值后，您可以使用AJAX异步发送到服务器，或者通过将src内容放入某个隐藏字段，以常规方式发布表单。从那时起，您可以使用PHP's GD and Image functions或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内的变化，但我个人和其他人实际上是having problems with that。

为了做你想做的其他事情，你应该能够用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错误。

更新解决方案：

<强> ======================

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

Answer 2

我有一个可行的版本-花了一个小时左右的时间才弄明白并窃取其他人的建议，将它们混合在一起，到处乱七八糟……

我从php（$（'＃profile_pic_filename'）。val（）;）隐藏的隐藏输入类型中，将文件名从html解析为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文件中，我获取图像并解码该图像的基本64版本，然后将其解析为一个具有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放在文件路径中，因为我不想放弃任何服务器信息。

如果所有操作都成功，则会重新加载页面，并且新转换的图像会加载到页面上，但是如果出现错误，它将提醒您。

Darkroomjs Image Cropping发布到PHP

2 个答案: