• 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.
Richard Korts
Richard Korts
  • 2
1 Solution
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" />

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.
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.
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