0

我读过很多帖子，由于安全风险，您无法将文件夹中的图像上传到服务器，因为 javascript 不允许此类访问。但是，我有一种情况，我在网站上有一个 svg 图像，我在网站上将其转换为 png。但是，我希望将转换后的图像发送到我的服务器。

我会遇到与从文档上传时相同的问题吗？

我试图做一个 jsfiddle 的例子，但它似乎不能document.write很好地接受，所以这里有一种解决方法：

演示：jsfiddle

理想情况下，我们应该有一个这样定义的按钮：

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

然后拥有在函数中进行转换的代码以及 ajax

function image() {
    //conversion code & ajax
}

所以总而言之，我只想知道这是否可能，如果你能展示另一种方式，我将不胜感激，它是否可能包括 php.ini 的组合。

提前致谢

似乎小提琴没有加载继承人的片段：转换的

   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+'"/>');
      }
   });
4

2 回答 2

0

Yes Of Course Their are ways:
I know 2:
1-(This One I know it works on chrome and Firefox but don't know IE):
First Get The Base 64 Data Of An Image In Canvas: 

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

Step3: Interprete it With 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";
}
?>

Yeap And That it.:D
You Could also loop throught each file in that directory and create a load button that get the Base64 Value And the first stuffs and out it into canvas using pucontent method of canvas element object

于 2013-07-03T18:45:44.720 回答
0

我不确定您的问题是什么，但确实，您可以使用 Ajax + PHP 的组合来上传您的图片。

客户端将使用 ajax（例如，使用jQuery.post ）发布一个编码图像（例如Base64编码），而 PHP 将接收图像并将其（解码后）存储在您的服务器中。

有关该过程的示例，请查看此问题，其中讨论了画布的特定情况。我认为您的 SVG 转换可以以类似的方式工作。

PS：由于某种原因，我无法加载您的 Fiddle。

编辑：

所以 Ajax 和 PHP 都是在前端编写的，用于将图像发送到我的服务器/数据库（ruby on rails）。那是对的吗？

不。客户端中仅使用 Javascript（带有 Ajax）。PHP 将是该过程的服务器部分，因此在您的情况下，它不会被使用，因为您已经在使用 Ruby on Rails。换句话说：

  1. 客户端（浏览器）使用 Javascript（可能是 JQuery）将图像数据（在您的代码段中img）发布到服务器（更多信息在这里）。

  2. 服务器（PHP、ASPX 或 Ruby 脚本 [以及其他]）获取 POST 数据并将图片保存在磁盘上（此处提供一些信息）。

如果您可以使用PHP（在服务器中）进行保存图像的具体过程，您可以使用我之前链接的问题作为指导。

于 2013-07-02T19:27:26.440 回答