Image Masks on the Web

Posted on 2007-10-19
Medium Priority
Last Modified: 2013-12-25
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.
Question by:Richard Korts
  • 2

Accepted Solution

deresh earned 2000 total points
ID: 20114119
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" />


Author Comment

by:Richard Korts
ID: 20115426
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.

Expert Comment

ID: 20121961
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.

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
It’s a season to be thankful, and we’re thankful for users like you who engage on site, solve technology problems, and network with others in the industry. What tech are we most thankful for? Keep reading.
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.
Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …
Suggested Courses
Course of the Month15 days, 22 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question