image reflection (horizontal or vertical)


/ Published in: JavaScript
Save to your folder(s)

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

<p>JavaScript:
add_reflection (document.getElementById ( 'image'), 1, 1, 0.1, 0); </p>

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

<p>PS Sorry for my english</p>


Copy this code and paste it in your HTML
  1. /**
  2.   * @param image document.getElementById('image')
  3.   * @param h_coef Stretcher reflection coefficient
  4.   * @param opacity_start The initial value of opacity
  5.   * @param opacity_end The ultimate value of the opacity
  6.   * @param mode 0 = vertical reflection, 1 = horizontal
  7.   */
  8. function add_reflection(image, h_coef, opacity_start, opacity_end, mode)
  9. {
  10. var container = document.createElement('div');
  11. var ref_height, ref_width, div_height, div_width;
  12.  
  13. if (0 == mode) {
  14. ref_height = Math.floor(image.height * h_coef);
  15. ref_width = image.width;
  16. div_height = Math.floor(image.height * (1 + h_coef));
  17. div_width = ref_width;
  18. }
  19. else {
  20. ref_width = Math.floor(image.width * h_coef);
  21. ref_height = image.height;
  22. div_height = ref_height
  23. div_width = Math.floor(image.width * (1 + h_coef));
  24. }
  25.  
  26. var reflection;
  27.  
  28. if (!window.opera && document.all) {
  29. reflection = document.createElement('img');
  30. reflection.src = image.src;
  31. reflection.style.width = image.width + 'px';
  32.  
  33. if (0 == mode) {
  34. 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)+')';
  35. }
  36. else {
  37. 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)';
  38. }
  39.  
  40. container.style.width = div_width + 'px';
  41. container.style.height = div_height + 'px';
  42. image.parentNode.replaceChild(container, image);
  43. container.appendChild(image);
  44. container.appendChild(reflection);
  45. }
  46. else {
  47. reflection = document.createElement('canvas');
  48. var context = reflection.getContext('2d');
  49. reflection.style.height = ref_height + 'px';
  50. reflection.style.width = ref_width + 'px';
  51. reflection.height = ref_height;
  52. reflection.width = ref_width;
  53.  
  54. container.style.width = div_width + 'px';
  55. container.style.height = div_height + 'px';
  56. image.parentNode.replaceChild(container, image);
  57. container.appendChild(image);
  58. container.appendChild(reflection);
  59.  
  60. context.save();
  61. var gradient;
  62.  
  63. if (0 == mode) {
  64. context.translate(0, image.height);
  65. context.scale(1, -1);
  66. gradient = context.createLinearGradient(0, 0, 0, ref_height);
  67. }
  68. else {
  69. context.translate(image.width, 0);
  70. context.scale(-1, 1);
  71. gradient = context.createLinearGradient(0, 0, ref_width, 0);
  72. }
  73.  
  74. context.drawImage(image, 0, 0, image.width, image.height);
  75. context.restore();
  76.  
  77. context.globalCompositeOperation = "destination-out";
  78. gradient.addColorStop(1, "rgba(255, 255, 255, " + (1 - opacity_end) + ")");
  79. gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity_start) + ")");
  80. context.fillStyle = gradient;
  81. if (-1 != navigator.appVersion.indexOf('WebKit')) {
  82. context.fill();
  83. }
  84. else {
  85. context.fillRect(0, 0, image.width, 2*ref_height);
  86. }
  87. }
  88. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.