• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1096
  • Last Modified:

Image Masks on the Web

We have a need to allow visitors to a web site to upload photos and then position them into unusual shaped frames. Examples are circle, baseball home plate, etc.

I understand that "Image Masks" can be used on the web to do this.

I need a reference to where I can learn the technical details of how to do this. We are proficient in php, javascript, html & asp.
0
Richard Korts
Asked:
Richard Korts
  • 2
1 Solution
 
dereshCommented:
if i understand you correctly,    you wish to compose image on web with your preset mask and user uploaded image. In that case you make a mask and save it in gif format with transparency, and then just put a user image in background.

Example: http://www.ok.com.hr

or here:

<div style="background-image: url('userfile.jpg');">
<img src="yourmask.gif" />
</div>

0
 
Richard KortsAuthor Commented:
To deresh:,

Yes, that's a start.

But then I need the ability to move either the background image or the foreground image (mask) so that the visitor can "adjust" the centering, etc.
0
 
dereshCommented:
you could do adjusting with javascript drag. Put background picture in one div and mask i another. make on of those two layers/ divs dragable and just get the "drop" cordinates". You can use some Js library for that ( jquery, prototype/scriptaculous, yui, etc.) so that you don't have to do it from scratch.
http://tool-man.org/examples/dragging.html is a nice example.

you could use that to adjust image, and then just take parameters form it and aply it to the first solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now