Image Masks on the Web

Posted on 2007-10-19
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
    LVL 6

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


    or here:

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


    Author Comment

    by:Richard Korts
    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.
    LVL 6

    Expert Comment

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

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    php simulator 5 57
    PHP get months from date search query where user 40 41
    Php Sql Query 7 20
    Order by clause 24 23
    Accessibility and Usability are two concepts that seem to be closely related.  But, too many people seem to have a distorted perception of them. During last five years, those two words have come to the day-to-day work of almost every web develope…
    I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

    746 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

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now