通过datauri和phpbase64解码上传javascript图像

javascript image upload via datauri and php base64 decode

本文关键字：javascript 图像 解码 datauri phpbase64 通过      更新时间：2023-09-26

我正在尝试上传一个图像，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()存在误用。

感谢您的帮助！

为了在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方面，这很棘手（不同的浏览器等）。首先你需要有图像数据。现在，您还没有确定这是如何来源的，代码示例也没有给出任何提示。我们可以假设一些选项

Simple您可以通过任何必要的方式正确填充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;
}

希望这能有所帮助！

Marcin Gałczyński的FOr:

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

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

相关文章：