0

我正在尝试进行图像上传，其中 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()or base64_decode()。

感谢帮助！

4

2 回答 2

0

对于@Marcin Gałczyński：

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

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

于 2013-07-28T12:39:20.213 回答
0

要在 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

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

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;
}

希望这可以帮助！

于 2013-07-28T12:10:27.140 回答