3

let's just say I want to give my web user the ability to give a radius size (let's say 5px) and then send him/her back a png file with a circle in this radius.

so I guess my question has 2 sections:

  1. How can I create an "image request" (which language and technologies) to get a PNG file, where is the file created and how
  2. I guess there is an API how to draw it but I need to know where is a good place to start to start.

I need to know where to start because this is a field I haven't explored yet.

Alon
  • 7,618
  • 18
  • 61
  • 99
  • 2
    Do you want to it all by javascript ? or use Serverside script too? – Birey Nov 09 '11 at 20:25
  • 1. There’s no such thing as an “image request” — in HTTP terms, you’d just be doing a normal GET request 2. Have you got a specific server-side language in mind? – Paul D. Waite Nov 09 '11 at 20:27
  • Is this homework? If so, tag it as such and people might help you – meouw Nov 09 '11 at 20:28
  • 2
    My best bet would be ImageMagick (PHP). Or do you need to do this yourself without API ? – Smamatti Nov 09 '11 at 20:28
  • 1
    http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/ – Birey Nov 09 '11 at 20:32
  • There are many solutions. Please specify your question. – Robin Nov 09 '11 at 20:41
  • It's not homework and I do want to use php (but didn't know if that language does such things). Thanks for all the tips - I will check them all. – Alon Nov 09 '11 at 21:21

1 Answers1

4

A very simple example with PHP:

<?php
// Create a blank image.
$image = imagecreatetruecolor(400, 300);
// Select the background color.
$bg = imagecolorallocate($image, 0, 0, 0);
// Fill the background with the color selected above.
imagefill($image, 0, 0, $bg);
// Choose a color for the ellipse.
$col_ellipse = imagecolorallocate($image, 255, 255, 255);
// Draw the ellipse.
imageellipse($image, 200, 150, $_GET['w'], $_GET['w'], $col_ellipse);
// Output the image.
header("Content-type: image/png");
imagepng($image);
?>

You have to call the script with the parameter w. e.g image.php?w=50 Mostly stolen from here.

And a little example with JavaScript and Canvas:

<!DOCTYPE html>
<html>
<body>
canvas:
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");


    function getParameterByName(name){
          name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
          var regexS = "[\\?&]" + name + "=([^&#]*)";
          var regex = new RegExp(regexS);
          var results = regex.exec(window.location.href);
          if(results == null)
            return "";
          else
            return decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(50,50,getParameterByName("w"),0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
    document.write('png:<img src="'+c.toDataURL("image/png")+'"/>');
</script>

</body>
</html>

You have still call the script with the parameter w. e.g image.html?w=50 This, this and @Phrogz helped me.

Community
  • 1
  • 1
Robin
  • 8,162
  • 7
  • 56
  • 101
  • For PNG output call `c.toDataURL()` and then open a new browser window with that data URL, let the user save it, or set the `.src` of an image on the page. – Phrogz Nov 09 '11 at 20:49