通過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圖像

回答

相關問題