通過json編碼發送和接收imagepng輸出AJAX

我使用PHP GD Library創建了一個PNG圖像，添加了一些基於用戶輸入的文本，而不是保存它，我想在用戶提交更改之前顯示它。通過json編碼發送和接收imagepng輸出AJAX

他們會添加幾個字，更改字體等，以便它需要顯示其更改。我得到這個工作的唯一方法是將圖像保存到服務器，但它爲用戶所做的幾十個輕微更改節省了數十張圖像。我需要覆蓋該文件，或者如果它是正確的，請執行下面的想法。這個想法是創建一個臨時文件來操縱。

那麼，我如何將它發送到「成功回調」就像我處理的其他變量？我讀了關於如何使用ob_get_contents()，我相信這應該暫時存儲圖像。這是如何工作的？

如何在窗體頁面（而不是處理PHP頁面）上顯示圖像，這是一個很好的計劃，以防止保存到服務器，直到用戶提交？

// more image manipulation code above 

ob_start(); 
imagepng($my_img); 
$imageData = ob_get_contents(); 
ob_clean(); 

$results = array(
'price' => $_GET['priceX'], 
'imageprocessed' => base64_encode($imageData) <<< EDIT change based on answer. 
); 

$json = json_encode($results); 
echo $json; 
?>

編輯：這是用於成功回調接收base64_encode的JavaScript。

<script type="text/javascript"> 
function doGen(){ 
var priceX = $('#couponprice').val(); 

$.get('processimage.php', 
{priceX:priceX}, 
function(data) { 
var imgFldr = '/images/';     
data = $.parseJSON(data); 
$('.price-placeholder').html(data.price); 
var imageCallback = (data.couponnamecall); 
$('#couponbuilt img').attr('src', 'data:image/jpeg;base64,' + imageCallback); 
// ... 
}); 
return false; 
}; 
</script>

來源

2012-07-30 LITguy

你可以base64encode($imageData)。

在客戶端，您只需從base64編碼數據中創建數據url並將其傳遞到image標籤的src屬性。

我測試了它：

PHP代碼

ob_start(); 
imagepng($my_img); 
$imageData = ob_get_contents(); 
ob_clean(); 

$results = array(
    'price' => $_GET['priceX'], 
    'image' => base64_encode($imageData) 
); 

$json = json_encode($results); 
echo $json;

Javascript代碼：

$.getJSON("/ajax-script.php", function(data) { 
    $("#element").append($("<img />").attr('src', 'data:image/png;charset=utf8;base64,' + data.image)); 
});

來源

2012-07-30 13:12:51 MarcDefiant

Base64編碼不能在所有瀏覽器都完全正常工作......不過，你可以保存圖像，然後將URL傳遞迴圖像。 – Gavin 2012-07-30 13:21:35

我測試過了。如果你使用php函數，base64是沒有問題的。 – MarcDefiant 2012-07-30 13:29:41

您測試了舊瀏覽器嗎？內聯base64圖像（即data：image/png）在IE6中不完全支持。 – Gavin 2012-07-30 13:37:15

你不需要JSON或XHR（ 'AJAX'）爲。

最簡單的方法是簡單地即時創建圖像，並通過將圖像的src更改爲能夠即時生成圖像的PHP文件來請求新圖像。

您可以通過多種方式來完成此操作。最簡單的描述如下：如果表單中的數據不是很多（沒有文本和千字節等），那麼您可以簡單地將預覽圖像的src設置爲PNG製作腳本的URL。所以你的img src是一個PHP腳本，而不是一個存儲的靜態png文件。

確保您的接收PHP腳本發送正確的標題（圖像/ PNG），並且您已準備好去。您需要一些JavaScript來組裝URL，並將其放入img src中。

如果你想使圖像永久，只需添加一個額外的名稱/值對的URL，像storepermanent = YES

來源

2012-07-30 13:24:33

我肯定會嘗試這個，但我使用AJAX在同一頁面上的許多其他操作，所以我試圖找到一種方法在一個批次中完成所有操作。 – LITguy 2012-07-30 13:42:29

通過json編碼發送和接收imagepng輸出AJAX

回答

相關問題