Post web image to a server

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

Send up the data url to the server. A simple post request will give you want you want. And using document.write is a bad idea. — epascarello, Jul 02 '13 at 19:26
Why is document.write a bad idea, could you suggest what I should do instead. Thanks — Jose, Jul 02 '13 at 19:29
[why-is-document-write-considered-a-bad-practice](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) — epascarello, Jul 02 '13 at 19:34

score 0 · Accepted Answer · edited May 23 '17 at 12:28

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:

The client (browser) uses Javascript (maybe JQuery) to POST the image data (in your snippet, img) to the server (more info here).
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.

So both Ajax & PHP are written on the front end to send the image to my server/database (ruby on rails). Is that correct? Also, apologies for the fiddle it was mainly the conversion i was showing — Jose, Jul 02 '13 at 19:35

Jamil Hneini · Answer 2 · 2013-07-03T18:51:10.937

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

Post web image to a server

2 Answers2