Polaroiding Images Using Raphaël

Step 6: Adding the Image

    <script type="text/javascript" charset="utf-8">
    window.onload = function () {
    var img = document.getElementById("photo");
    img.style.display = "none";
    var r = Raphael("holder", 490, 450);
    r.rect(55, 63, 360, 300).attr({fill: "#000"}).attr({opacity: .2}).attr({stroke: "#000"}).attr({"stroke-width": 4}).attr({"stroke-opacity": .5});	// the shadow
    r.rect(50, 55, 360, 300).attr({fill: "#fff"}).attr({stroke: "#ddd"}).attr({"stroke-width": 2}); // polaroid frame	
    
    r.image(img.src, 70, 75, 320, 240); // jpeg
};
    </script>
      

• Previous
• Next