Question

我正在尝试上传图像，其中JavaScript通过AJAX发布图像的DataURI，然后PHP接收它以将其解码为图像。

问题是，除最终产品不是图像文件外，一切正常。

请查看以下示例代码。

JavaScript的：

dataString='encodedimg='+e.target.result.match(/,(.*)$/)[1]+'&type='+type;
$.ajax({
  url: 'uploadhandler_ajax.php',
  type: 'POST',
  data: dataString,
  success: function(data){
    //print success message
  });

PHP：

$encodedimg = $_POST['encodedimg'];
file_put_contents('asdf.png', base64_decode($encodedimg));

$_POST['encodedimg']没有问题，因为它使用在线base64转换器生成正确的图像。所以我假设有file_put_contents()或base64_decode()误用。

感谢帮助！

Answer 1

要在PHP上阅读图像，我使用了像这样的函数

function rcd($data) {
    $p = strpos($data, ',');
    $d = base64_decode(substr($data, $p+1));
    $rfn = md5(mt_rand(1,123123123));
    file_put_contents($rfn, $d, LOCK_EX);
    return $rfn;
}

用法示例： $img_file_name = rcd($_POST['image_data']);

在JS部分，它很棘手（不同的浏览器等）。首先，您需要拥有图像数据。现在你不确定这是如何获取的，代码示例没有给出提示。我们可以假设一些选项

简单您可以通过任何必要的方式正确填充dataString，那么您的示例应该基本上可以正常工作

imgdata = .... // any means of getting the data

$.ajax({
  url: 'uploadhandler_ajax.php',
  type: 'POST',
  image_data: imgdata,
  success: function(data){
    //print success message
});

不那么简单您在屏幕上有一个Canvas对象，它以任何方式填充并且您想要发送该数据。无论上述情况如何，获取图像数据的方式都是

var canv = document.getElementById('id_of_canvas');
imgdata = canv. toDataURL('image/jpeg', 0.88); // last arg is quality

但是，由于某些浏览器（手机）可能不太支持这种情况，您可能希望找到JS的JPEGEncoder，并将其与下面的代码一起添加到您的项目中。

var tdu = HTMLCanvasElement.prototype.toDataURL;
HTMLCanvasElement.prototype.toDataURL = function(type,param1)
{
 var res = tdu.apply(this,arguments);
 if(res.substr(0,11) != "data:image/")
 {
  var encoder = new JPEGEncoder();
  return encoder.encode(this.getContext("2d").getImageData(0,0,this.width,this.height), (param1 ? param1*100 : 88));
 }
 else return res;
}

希望这有帮助！

Answer 2

@MarcinGałczyński：

$.ajax({
  url: 'uploadhandler_ajax.php',
  type: 'POST',
  image_data: imgdata,
  success: function(data){
    //print success message
  }
})

我认为jQuery.ajax没有image_data jQuery.ajax

通过datauri和php base64解码上传javascript图片

2 个答案: