Results 1 to 6 of 6

Thread: get pixel attributes onclick clientside javascript

  1. #1
    Join Date
    Mar 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default get pixel attributes onclick clientside javascript

    I have a png that my user is going to click on. It has a transparent background. I need to determine whether or not they have clicked on the transparent background or on another part of the image. I need to do this clientside. here are some options I have already ruled out:

    1. I do not want to use image maps if at all possible because I would have to create a map for each of the several thousand images I will be working with. Don't want to get into the image processing at this point. perhaps in the futre.

    2. I have tried the canvas element but it doesnt work in ie. Except if I use excanvas, but then the feature to get a pixels attributes does not work, so canvas is out until that is solved.

    3. I do not want to use flash as I would really like Ipad users to be able to use my site. Not to mention I do not want to further complicate things by using another 3rd party applicaiton...

    4. I have tried creating a text file with an array of 1s and 0s that represent each pixel and whether it is transparent or not. This results in a absolutely massive text file. I could perhaps look at every fifth column and every fifth row to greatly shrink the text file, and perhaps do some encoding... but there must be a better way.

    Aside from these 4, is there a way to determine the attrributes of a pixel that a user clicks on (transparent or not in a png file), clientside, without making them install any 3rd party software?



    Thanks,

    Sam

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Using javascript, it's a fairly simple matter to get the x and y coordinates of a mouse click. Finding the coordinates of the image is also fairly straightforward. If you know the coordinates (relative to the image itself) of the transparent area or of the solid area, it would then be a process of elimination to determine which had been clicked.

    However, an image map is really easier by far. Using any decent image map software (Meracl makes a good free one) ,you just draw a shape around the solid area, the rest would be the default area. By adding/attaching onclick events to those two areas, you would know which had been clicked. If it is just a matter of loading/not loading a page on that basis, or of loading one page or another on it, no javascript would be required.

    But, you may be putting too fine a point on this. If someone clicks in the general area, in most cases that could qualify as clicking on the solid area without presenting any real problems.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for your response.

    I really do need to know whether or not they have clicked on a transparent background. In regards to image maps, I will need to do this for thousands of images with very irregular shapes, thus I would need some pretty advanced image processing and automation to make it work. This may be the best solution in the long run. But I am very surprised there isnt an easy way to get the details of a particular pixel a user clicks on clientside.

    Back to your first suggestion. I know I can get the coordinate of the pixel in the image on which the user clicked. Its getting the alpha value of this pixel without a post back that I cant seem to be able to do.

    Despite my lack of success at tracking a solution down, I still feel like there must be one out there. Given enough time, I would think one could write a program that decodes a png file while it is clientside for a pixel of known coordinates. Isnt there anything like this already out there?

    Thanks,
    Sam

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Getting the pixel coords is easy, well documented many places around the web. To read those pixels within an image and determine their alpha or any other characteristic, I've simply never seen anything like that on the client side. Using AJAX and something on the server side, it should be possible to approximate this as a client side service. However, it would most likely be server intensive, making its practical application difficult at best.

    I'm still not convinced (one way or the other) that you need that much precision. Also, I work best from concrete examples. Could you give me a link to such an image and explain in detail what must happen when various parts of it are clicked and why?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    I don't know much about ajax, but perhaps thats a possibility. I don't need a full post back. I just need to request whether a certain pixel is transparent or not. Just need to send a few characters and receive a few. But perhaps it is more the initiation of the transfer than the actual quantity that slows things down? I really need it to be less than half a second tops...

    Though I am sure it would help solve the problem and it wouldn't make a difference to the project, I am bound by contract and cannot disclose the project. Pretty much leaves us with our hands tied behind our backs, so I understand if you don't want to spend any more time on the problem.

    I do have a couple decent options for solving the problem now. It would just be nice to find that simple solution. I really thought I had it with excanvas until I realized it was missing the one thing I really needed...

    Thanks for your help,
    Sam

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Ajax cannot be made "fast"-- it requests something and waits to get an answer.
    If everything is setup right it won't take more than 1/2 second, BUT processing on the server can be slow.

    Processing image data is always slow but luckily there are fast functions for grabbing the color values of a certain pixels including alpha data.

    Based on that you can do exactly what you want. It's in fact not very hard, but the problem is that this might take a toll on your server over time if many people are using it.
    There really isn't a way around it because it's just the nature of images that is slow: they're huge files (compared to text, etc), so even stored in a database, etc., that much info would be slow to process.


    I am positive that a script like this was floating around here a year or year and a half ago that would demonstrate what you need to do including ajax. It was used to set the page's background color to the color of the image pixel clicked. I can't find it, but I know I was partly involved in coding it (though I can't remember why).
    I'll post here if I run into it, but couldn't find it at the moment.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •