将Web图像发布到服务器

Question

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

Answer 1

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.