Загрузка изображения javascript через datauri и php base64 decode

Question

Я пытаюсь сделать загрузку изображения, где сообщения JavaScript DataURI изображения через AJAX и 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 правильно заселенных любые средства 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; 
} 

Надеюсь, это поможет!

Answer 2

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