郵政網頁圖像服務器

我已經看了很多帖子，由於安全隱患，你不能上傳到自己的服務器與您的文件夾，如JavaScript心不是允許這種訪問的圖像。但是，我有一個情況，我在網站上有一個svg圖像，我在網站上轉換爲png。但是，我希望將轉換後的圖像發送到我的服務器。郵政網頁圖像服務器

我會遇到同樣的問題，如果我從我的文件上傳？

我試圖讓的jsfiddle的例子，但似乎它不接受document.write非常好，所以這裏的排序的變通：

DEMO：jsfiddle

理想的情況下，我們將有一個按鈕定義爲所以：

<button id="image" onClick="image()">Convert & Send</button>

然後具有與AJAX

沿着做了函數內的轉換的代碼

所以最後，我只想知道如果這是可能的，如果沒有，我會很感激，如果你能展示另一種方式，是否可能包括PHP的組合。

在此先感謝

它好像小提琴心不是裝載繼承人的片段：轉換的

function image() { 

     var svg = document.getElementById("svg-container").innerHTML.trim(); 
     var canvas = document.getElementById('svg-canvas'); 
     canvg(canvas, svg, { renderCallback: function() { 
     var img = canvas.toDataURL("image/png"); 
     document.write('<img src="'+img+'"/>'); 
     } 
    });

來源

2013-07-02 Jose

將數據url發送到服務器。一個簡單的發佈請求會給你想要的。使用document.write是一個壞主意。 – epascarello

爲什麼document.write是一個糟糕的主意，你能建議我應該做些什麼嗎？謝謝 – Jose

[爲什麼是文檔編寫被認爲是一個壞習慣]（http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice） – epascarello

我不知道你的問題是什麼，但事實上，你可以使用Ajax + PHP的組合來上傳您的圖片。

客戶端使用ajax（例如使用jQuery.post）發佈編碼圖像（例如編碼在Base64），而PHP將接收圖像並將其存儲（解碼後）到您的服務器中。

對於該過程的示例，check this question，其中討論了畫布的特定情況。我認爲你的SVG轉換可以以類似的方式工作。

PS：出於某種原因，我無法加載您的小提琴。

編輯：

因此，無論阿賈克斯& PHP寫在前端的圖像發送到我的服務器/數據庫（Ruby on Rails的）。那是對的嗎？

不，只有Javascript（含Ajax）用於客戶端。 PHP將成爲這個過程的服務器部分，所以在你的情況下它不會被使用，因爲你已經在使用Ruby on Rails。換句話說：

客戶端（瀏覽器）使用JavaScript（也許JQuery的）張貼圖像數據（在你的代碼片段，img）服務器（more info here）。
服務器（一個PHP，ASPX或Ruby腳本[等]）獲取POST數據並將圖片保存在磁盤上（some info here）。

如果你可以使用PHP（服務器）用於保存圖像的具體過程中，你可以使用the question I linked before作爲指導。

來源

2013-07-02 19:27:26 Racso

所以Ajax和PHP都在前端編寫，將圖像發送到我的服務器/數據庫（ruby on rails）。那是對的嗎？另外，小提琴的道歉主要是我正在顯示的轉換 – Jose

在答案中回答了您的問題：P – Racso

是的，當然他們的辦法：
我知道2：
1-（這一個我知道它適用於Chrome和Firefox，但不知道IE）：
首先得到基地64數據的圖片在畫布：

<canvas id="Canv" ....(Other Attributes)> 
Your Browser does not support the canvas element :(
</canvas> 
<button type="button" OnClick="Image()">Transform and Save</button> 
<script type="text/javascript> 
var can =document.getElementById('Can'); 
var ctx = can.getContext("2d"); 
//do something with ctx 
function image(){ 
//You Should check the real format using img.src 
var data = can.toDataURL("image/png"); 
var array = data.split("."); 
var Base64Data = array[1]; 
//Now step 2 :Sent it to PHP 
//Check for Browser compatibly 
var ajx = new XmlHttpRequest() 
ajx.onreadystatechange=function() 
{ 
if (ajx.readyState==4 && ajx.status==200) 
{ 
if(ajx.ResponseText == "Err"){//if the paged returned error 
alert("An error Has Occurred"); 
return; 
}//if not 
alert("Saved Succesufuly"); 
} 
} 
ajx.open("GET","Save.php?q=" + Base64Data , true); 
} 

</script>

第三步：Interprete它採用PHP

<?PHP 
if(isset($_GET['q] And !Empty($_GET['q'])){ 
try { 
$Data = $_GET['q']; 
$hndl = fopen("Saved/Pic1.jpg" , "w"); 
fwrite($hndl , $Data); 
fclose($hndl); 
}catch(Exception $err){ 
echo "Err"; 
} 
}else { 
echo "Err"; 
} 
?>

葉氏而這it.:D
您還可以循環遍歷該目錄中的每個文件，並創建一個加載按鈕，獲取Base64值和第一個東西，並使用畫布元素對象的pucontent方法將其輸出到畫布中

來源

2013-07-03 18:45:44

郵政網頁圖像服務器

回答

相關問題