邮政网页图像服务器

我已经看了很多帖子，由于安全隐患，你不能上传到自己的服务器与您的文件夹，如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

邮政网页图像服务器

回答

相关问题