0

I have an image that has grid lines on it and would like to allow the user to draw thicker lines on those grid lines and each line should go from one intersection to the next. Where should I begin my research? I realize this is probably a very broad question, I am just looking for a bit of direction here. Looking for php and jquery/javascript solutions.

Much appreciation, Todd

maddogandnoriko
  • 980
  • 2
  • 13
  • 31
  • If this is only for display in-browser a JavaScript/CSS solution might be easiest (think dynamically changing the CSS border on divs). If you actually need to create the image file your best bet is probably ImageMagick, though gd/gd2 is also an option. –  Dec 12 '11 at 13:53

1 Answers1

5

You can use <canvas> element.

  1. Load your image into canvas using .drawImage().
  2. Create onclick handler for canvas and draw lines.
  3. Save the output from canvas into a image using toDataURL().

Links:

  • This answer demonstrates drawing images onto canvas and retrieving the result with .toDataURL().

  • This answer contains code how to retrieve coordinates of the click on the canvas.

Update:

As a bonus: HERE is the code to play with :). Drawing is there, but snapping to grids must be added. Tested with Chrome and Firefox.

Community
  • 1
  • 1
kubetz
  • 8,485
  • 1
  • 22
  • 27