Question

尝试使用jquery ajax调用触发uploadcare php函数，除了用户选择的裁剪区域外，我还能正常工作。它按合适的比例进行裁剪，但默认为左上角。

我在传递用户选择的裁剪区域时缺少什么？

这是运行脚本的jQuery代码

$(function() { 
  $('#avatar-uc').each(function() { 
     $("#avatar-uc").find('.uploadcare-widget-button-open').html('<i class="fa fa-camera"></i> Edit Photo'); 
     $("#avatar-uc").find('.uploadcare-widget-button-remove').html('<i class="fa fa-camera"></i> Edit Photo'); 
       WidgetResetAvatar( 
        uploadcare.SingleWidget($(this).children('input'))
      ); 
});
});
function WidgetResetAvatar(widget) { 
  widget.onChange(function(file) {
    if (file) { 
      file.done(function(fileInfo) { 
        $.ajax({
            url: '/asset/create/avatar',
            method: 'POST',
            disablePreview: true,
            headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')},
            data: {uuid: fileInfo.uuid},
        })
        .done(function( data ) {
          $('#avatarPhoto').css('background-image', 'url("'+data.avatar_url+'")')
        });
      }); 
    }  
    widget.value(null)
  }); 
}

PHP函数

public function CreateAvatar(Request $request)
{
if (!Auth::check()) {
    return Response::json(array('message' => 'not logged in'));
}

$user = Auth::user();

if ($request->ajax()) {
    if (!empty($request->uuid)) {
        $api = app()->uploadcare;
        $original_file = $api->getFile($request->uuid);
        $cropped_file = $original_file->crop(150,150)->copy();
        $cropped_file->store();
        $cropped_file_url = $cropped_file->data['original_file_url'];
        $upload_url = "https://ucarecdn.com";
        $remove_upload_care_url = "";
        $cropped_file_path = str_replace($upload_url, 
$remove_upload_care_url, $cropped_file_url);
    }
    else {
        $cropped_file_path = "";
    }

    $user->avatar = $cropped_file_path;
    $user->save();

    return Response::json(['avatar_url' => $cropped_file_url]);
}
}

Answer 1

出于某种原因， crop（）函数不接受裁剪区域的坐标，只是为了使其居中（参见the code）。

最简单的方法是构建网址by hand。将PR发送到库以接受坐标的加分点。

Uploadcare没有正确裁剪

1 个答案: