Posted By

Jman on 01/18/09

Tagged

Versions (?)

Last Edited at 01/18/09 01:25pm

Statistics

Viewed 727 times

Favorited by 2 user(s)

Related snippets

image reflection (horizontal or vertical)

/ Published in: JavaScript

How to use: HTML:
<img id="image" src="image.png" alt=""/>

JavaScript:
add_reflection (document.getElementById ( 'image'), 1, 1, 0.1, 0); 

As a result, the script wrap image in the div, ask him to the desired height and width and put reflection of image

PS Sorry for my english

Highlighted TextExpand

/**
     * @param image document.getElementById('image')
     * @param h_coef Stretcher reflection coefficient
     * @param opacity_start The initial value of opacity
     * @param opacity_end The ultimate value of the opacity
     * @param mode 0 = vertical reflection, 1 = horizontal
     */
    function add_reflection(image, h_coef, opacity_start, opacity_end, mode)
    {
        var container  = document.createElement('div');
        var ref_height, ref_width, div_height, div_width;
        
        if (0 == mode) {
            ref_height = Math.floor(image.height * h_coef);
            ref_width  = image.width;
            div_height = Math.floor(image.height * (1 + h_coef));
            div_width  = ref_width;
        }
        else {
            ref_width  = Math.floor(image.width * h_coef);
            ref_height = image.height;
            div_height = ref_height
            div_width  = Math.floor(image.width * (1 + h_coef));
        }
        
        var reflection;
        
        if (!window.opera && document.all) {
            reflection = document.createElement('img');
            reflection.src = image.src;
            reflection.style.width = image.width + 'px';
            
            if (0 == mode) {
                reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(opacity_start*100)+', style=1, finishOpacity='+(opacity_end*100)+', startx=0, starty=0, finishx=0, finishy='+(h_coef*100)+')';
            }
            else {
                reflection.style.filter = 'fliph progid:DXImageTransform.Microsoft.Alpha(opacity='+(opacity_start*100)+', style=1, finishOpacity='+(opacity_end*100)+', startx=0, starty=0, finishx='+(h_coef*100)+', finishy=0)';
            }

container.style.width  = div_width + 'px';
            container.style.height = div_height + 'px';
            image.parentNode.replaceChild(container, image);
            container.appendChild(image);
            container.appendChild(reflection);
        }
        else {
            reflection  = document.createElement('canvas');
            var context = reflection.getContext('2d');
            reflection.style.height = ref_height + 'px';
            reflection.style.width  = ref_width + 'px';
            reflection.height       = ref_height;
            reflection.width        = ref_width;
            
            container.style.width  = div_width + 'px';
            container.style.height = div_height + 'px';
            image.parentNode.replaceChild(container, image);
            container.appendChild(image);
            container.appendChild(reflection);
            
            context.save();
            var gradient;
            
            if (0 == mode) {
                context.translate(0, image.height);
                context.scale(1, -1);
                gradient = context.createLinearGradient(0, 0, 0, ref_height);
            }
            else {
                context.translate(image.width, 0);
                context.scale(-1, 1);
                gradient = context.createLinearGradient(0, 0, ref_width, 0);
            }
            
            context.drawImage(image, 0, 0, image.width, image.height);
            context.restore();
            
            context.globalCompositeOperation = "destination-out";
            gradient.addColorStop(1, "rgba(255, 255, 255, " + (1 - opacity_end) + ")");
            gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity_start) + ")");
            context.fillStyle = gradient;
            if (-1 != navigator.appVersion.indexOf('WebKit')) {
                context.fill();
            } 
            else {
                context.fillRect(0, 0, image.width, 2*ref_height);
            }
        }
    }

URL: http://blog.sjinks.org.ua/javascript/356-image-reflection-with-javascript/

Report this snippet Tweet