SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Turn a flat image into a Perspective

    I'm looking for a script (JS or any) that can turn/flip a flat image into a perspective. For example, a user uploads their photo and the script will add perspective to the image. If you know of such a script please share the link or the name.

  2. #2
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Javascript is probably not the way you want to go about doing this.

    Particularly the way you say "upload". It sounds like you're looking for something server-side. You can't really open a file on the user's computer with Javascript.

    Maybe you could give more details, too, about what you mean by "add perspective".
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff

  3. #3
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    As mmj said, you won't be able to do this in JavaScript. And I don't think there are ready to go scripts you can upload to your server to do this.

    What you could do, is to upload the file, then use something like PHP and Imagick to change the image. Here's an example of how to do the last part: Perspective transformations Mikko’s blog

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #tst {
     position:relative;left:100px;top:100px;width:200px;height:200px;
    }
    
    /*]]>*/
    </style>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function zxcPerspective(o){
     var obj=document.getElementById(o.ParentID),clone=document.createElement('IMG'),f=document.createDocumentFragment(),w=obj.offsetWidth,max=obj.offsetHeight,min=o.MinHeight,i,z0,h;
     clone.src=o.ImageSRC;
     clone.style.position='absolute';
     clone.style.left='0px';
     clone.style.top='0px';
     i=(max-min)/w;
     for (var z0=0;z0<w;z0++){
      clone=z0>0?clone.cloneNode(false):clone;
      clone.style.clip='rect(0px,'+(z0+1)+'px,'+max+'px,'+z0+'px)';
      h=max-z0*i;
      clone.style.height=h+'px';
      clone.style.top=(max-h)/2+'px';
      f.appendChild(clone);
     }
     obj.appendChild(f);
    }
    
    
    /*]]>*/
    </script>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    zxcPerspective({
     ParentID:'tst',
     ImageSRC:'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',
     MinHeight:150
    })
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    
    </head>
    
    <body>
    
    </body>
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
     <div id="tst" >
     </div>
    </html>

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mmj View Post

    Maybe you could give more details, too, about what you mean by "add perspective".
    I'm basically trying to create something Like This for a site of mine dedicated to the BlackBerry PlayBook. I want to change the flat frame with something with a little perspective.

  6. #6
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #tst {
     position:relative;left:100px;top:100px;width:200px;height:200px;
    }
    
    /*]]>*/
    </style>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function zxcPerspective(o){
     var obj=document.getElementById(o.ParentID),clone=document.createElement('IMG'),f=document.createDocumentFragment(),w=obj.offsetWidth,max=obj.offsetHeight,min=o.MinHeight,i,z0,h;
     clone.src=o.ImageSRC;
     clone.style.position='absolute';
     clone.style.left='0px';
     clone.style.top='0px';
     i=(max-min)/w;
     for (var z0=0;z0<w;z0++){
      clone=z0>0?clone.cloneNode(false):clone;
      clone.style.clip='rect(0px,'+(z0+1)+'px,'+max+'px,'+z0+'px)';
      h=max-z0*i;
      clone.style.height=h+'px';
      clone.style.top=(max-h)/2+'px';
      f.appendChild(clone);
     }
     obj.appendChild(f);
    }
    
    
    /*]]>*/
    </script>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    zxcPerspective({
     ParentID:'tst',
     ImageSRC:'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',
     MinHeight:150
    })
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    
    </head>
    
    <body>
    
    </body>
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
     <div id="tst" >
     </div>
    </html>

    Wow! I guess it can be done with JS. Superb!

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am working on a version with more options

    I will not be able to post it as I cannot promote my site but I could PM you if you are interested.

    You should appreciate it is not practical for large images.


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
  •