如何将图像从cropit导出到php上传？

我一直在互联网上搜索一段时间，找不到任何告诉我如何将结果从$('#image-cropper').cropit('export')转换为PHP可以上传到服务器的图像的内容。 我正在使用Cropit插件，所有我需要的是一个图像，我可以传递到我的PHP上传脚本。 我的代码如下：

HTML：

 
  
  Export  

jQuery的：

  var username = ""; $('#image-cropper').cropit({ imageState:{ src:'users/'+username+'/profile_picture.jpg' }, }); $('#image-cropper').cropit('previewSize', {width:500, height:500}); $('.export').click(function() { var imageData = $('#image-cropper').cropit('export'); //$("#code").val(imageData); window.open(imageData); }); 

这里的代码适用于插件，但我无法将看起来像data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD...的结果data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD...转换成我可以在php脚本中使用的图像。 任何帮助都会很棒。 谢谢！

Answer 1

我使用它的方法是弄乱Cropit的质量设置并创建一个读取base64字符串并将其转换为图像的PHP函数。

以下代码适用于cropit。 我正在设置超时，因为如果你不这样做，它会将表单发送到php，然后cropit才能创建base64。 base64字符串只存储在一个文本字段中，php可以根据$_POST通信

 //Initiate Cropper $('.image-editor').cropit(); //Assign Export Function $('.export').click(function() { var imageData = $('.image-editor').cropit('export', { type: 'image/jpeg', quality: 0.33, originalSize: true, }); //Set value of hidden input to base64 $("#hidden_base64").val(imageData); //Pause form submission until input is populated window.setTimeout(function() { document.upload_form.submit(); alert(imageData); }, 1000); }); 

下面的代码是针对php的。 它的工作原理是解码base64，然后将其移动到指定的目录。

 function decode ($code, $username) { list($type, $code) = explode(';', $code); list(, $code) = explode(',', $code); $code = base64_decode($code); file_put_contents('directory/filename.jpg', $code); }