Turn a flat image into a Perspective

JavaScript
1

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

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.

3

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

4

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.

5

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

6

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

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