douxian0279
douxian0279
2013-07-02 19:11

将Web图像发布到服务器

I've read many posts that due to security risks you cannot upload to your server with an image from your folder as javascript isnt allowed such access. However, I have a situation where i have an svg image on a web site that I convert to a png whilst on the website. But, I wish to send the converted image to my server.

Will I encounter the same problems as if I were uploading from my documents?

I tried to make an example of jsfiddle but it seems it doesnt accept document.write very well, so here's sort of a work-around:

DEMO: jsfiddle

Ideally we would have a button defined as so:

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

Then have the code that does the conversion within a function along with the ajax

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

So in conclusion I would just like to know if this is possible if not, i would be grateful if you could show an alternative way, whether it may include a combination of php.

thanks in advance

It seems as though the fiddle isnt loading heres the snippet: of the conversion

   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+'"/>');
      }
   });
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • duanfenhui5511 duanfenhui5511 8年前

    I'm not sure about what your question is, but indeed, you can use a combination of Ajax + PHP to upload your image.

    The client would POST an encoded image (e.g. encoded in Base64) using ajax (using jQuery.post, for example), while the PHP would receive the image and store it (after decoding it) in your server.

    For an example of the process, check this question, where a specific case of a canvas is discussed. I think your SVG conversion could work in a similar way.

    PS: For some reason, I couldn't load your Fiddle.

    EDIT:

    So both Ajax & PHP are written on the front end to send the image to my server/database (ruby on rails). Is that correct?

    No. Only Javascript (with Ajax) is used in the client. PHP would be the server part of the process, so in your case it would not be used as you are already using Ruby on Rails. In other words:

    1. The client (browser) uses Javascript (maybe JQuery) to POST the image data (in your snippet, img) to the server (more info here).

    2. The server (a PHP, ASPX or Ruby script [among others]) gets the POSTed data and saves the picture on disk (some info here).

    If you can use PHP (in the server) for the specific process of saving the image, you can use the question I linked before as a guide.

    点赞 评论 复制链接分享
  • doucheng1944 doucheng1944 8年前

    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

    点赞 评论 复制链接分享