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

我试图做一个图像上传，其中JavaScript通过AJAX发布了一个图像的DataURI，PHP接收它将其解码为图像。通过datauri和php base64解码上传的javascript图像

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

请看下面的示例代码。

的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()。

感谢帮助！

来源

2013-07-28 Hwa Soo Cho

要读取的图像上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正确而不择手段neccesary填充，那么你的榜样应该基本工作

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的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-28 12:10:27

感谢这个解决方案，但你的文件名不保证能够在'MD5独特（mt_rand（1,123123123））' - 我推荐'uniqid（）'。 – tubes

为@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

来源

2013-07-28 12:39:20 emaniacs

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

回答

相关问题