Altering images with javascript

@darkling235Apr 21.2010

I’m building an application. The goal of this subroutine is that the user can upload an image to the browser, and then enter coordinates (X,Y) to place icons and dots at the specified place. Can anyone suggest a good way to draw these dots and icons on an uploaded image?
Thanks a ton.

to post a comment

JavaScript

@JMRKERApr 21.2010 — #You're probably going to need a server-side language for this operation.

@darkling235authorApr 21.2010 — #Really? Javascript can;t draw points or icons on an image? What about an overlay? Maybe generate a new image with the stuff I wanted to put and then place it on top of the original picture?

Thanks

@tirnaApr 21.2010 — #Maybe you could use this css positioning demo code as a template to do what you want.

You could put your image in the red div and then have as many green child divs containing icons and interactively move them wherever you like over the image.

The code uses javascript to manipulate elements' css position coordinates

[code=php] 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
 <style type="text/css">
 <!--
 
 #redDiv {
 position: relative;
 top: 50px;
 left: 50px;
 background-color: red;
 width: 100px;
 height: 100px}
 
 #greenDiv {
 position: absolute;
 top: 35px;
 left: 35px;
 background-color: green;
 width: 100px;
 height: 100px}
 
 #inputs {
 position: absolute;
 top: 350px;
 left: 10px}
 
 -->
 </style>
 <script type="text/javascript">
 <!--
 
 function moveDiv(elemId,coord) {
 switch (elemId)  {
 case "greenX":
 document.getElementById("greenDiv").style.left = coord+"px";
 break;
 case "greenY":
 document.getElementById("greenDiv").style.top = coord+"px";
 break;
 case "redX":
 document.getElementById("redDiv").style.left = coord+"px";
 break;
 case "redY":
 document.getElementById("redDiv").style.top = coord+"px";
 break;
 }
 }
 
 //-->
 </script>
 </head>
 <body>
 
 <div id="redDiv">
 Parent Div
 <div id="greenDiv">Child Div</div>
 </div>
 <div id="inputs">
 <table cellspacing="15">
 <tr>
 <td>Green X<br />Relative to parent</td><td><input type="text" id="greenX" onchange="moveDiv(this.id,this.value)" /></td>
 </tr>
 <tr>
 <td>Green Y<br />Relative to parent</td><td><input type="text" id="greenY" onchange="moveDiv(this.id,this.value)" /></td>
 </tr>
 <tr>
 <td>Red X<br />Relative to page</td><td><input type="text" id="redX" onchange="moveDiv(this.id,this.value)" /></td>
 </tr>
 <tr>
 <td>Red Y<br />Relative to page</td><td><input type="text" id="redY" onchange="moveDiv(this.id,this.value)" /></td>
 </tr>
 </table>
 <p>The text boxes have onchange event handlers.</p>
 </div>
 
 </body>
 </html>
 [/code]

@rnd_meApr 22.2010 — #you can easily manipulate an image using the canvas tag.

google for "html canvas demo" for details.

the only problem is that it's tough to save the changes because canvas only exports to uncompressed png.

do you need to save the changes?

@darkling235authorApr 22.2010 — #No the goal is basically just to draw "points" on an image. We don't need to save them or anything but we do need to be able to draw points. I hadn't heard of Canvas tags before but I'll look it up tonight. The goal is that the user can input a group of X, Y coordinates and we build a HeatMap on the image based off the coordinates.

Altering images with javascript

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Altering images with javascript

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴