用new dataurl fineuploader替换当前图像

Question

美好的一天，

我终于能够使用fineupload为我的图像上传器创建裁剪功能。

我已经将我的微调装载器设置为autoUpload: false,所以我可以在它传递到服务器之前裁剪图像，这是我现有的......

继承我捕获裁剪按钮并初始化裁剪器的代码

$(document).on('click','.qq-upload-crop',function(e){ 
    var id = $(this).parent('li').attr('qq-file-id');
    var x =  manualUploader.getFile(id);
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#cimgx').attr('src',e.target.result);
    };
    reader.readAsDataURL(x);
    setTimeout(initCropper, 1000);
    $('#crop-modal').modal('show');
});


function initCropper(){
     $('#cimgx').cropper({
      cropBoxResizable:true,
      autoCrop:true,
      minCropBoxWidth:600,
      minCropBoxHeight:400,
    });
}

如果我点击裁剪

另一个模态出现了。

当我点击裁剪按钮时，使用此代码

$('#crop').on('click',function(e){
  var x = $('#cimgx').cropper('getCroppedCanvas').toDataURL('image/jpeg');
  console.log(x);
})

我得到了dataUrl作为回报。

现在我想用cropperjs中的裁剪图像替换当前最初上传的图像。

如何更换要传递的数据请...感谢您的帮助..

Answer 1

不确定我是否理解了这个问题

1）您想要替换原始img元素

的图像

$('#original_image').attr('src',x);

2）您更希望将裁剪的图像上传到服务器

<强> HTML

<form action="" id="form_id" method="post" enctype="multipart/form-data">
<input name="upload_media" id="upload_media" type="file" class="hidden">
</form>

<强>的Javascript

$('#crop').on('click',function(e){
  var x = $('#cimgx').cropper('getCroppedCanvas').toDataURL('image/jpeg');
  console.log(x);
})
var form_data = new FormData($('#form_id')[0]);
form_data.set('upload_media', cropped_img_data, 'filename.jpg');


$.ajax({
type: 'POST',
url: 'upload.php',
data: form_data,
success: function(data) {
 console.log(data)
}
})

<强> PHP

$filename = $_FILES['upload_media']['name'];
$img = $_FILES['upload_media']['tmp_name'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
file_put_contents($filename, $data);

快乐的编码！