https://dietpatan.org/js/jQuery.BlackAndWhite.js

1/**
2 *
3 * Version: 0.2.3
4 * Author:  Gianluca Guarini
5 * Contact: [email protected]
6 * Website: http://www.gianlucaguarini.com/
7 * Twitter: @gianlucaguarini
8 *
9 * Copyright (c) 2012 Gianluca Guarini
10 *
11 * Permission is hereby granted, free of charge, to any person
12 * obtaining a copy of this software and associated documentation
13 * files (the "Software"), to deal in the Software without
14 * restriction, including without limitation the rights to use,
15 * copy, modify, merge, publish, distribute, sublicense, and/or sell
16 * copies of the Software, and to permit persons to whom the
17 * Software is furnished to do so, subject to the following
18 * conditions:
19 *
20 * The above copyright notice and this permission notice shall be
21 * included in all copies or substantial portions of the Software.
22 *
23 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
24 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
25 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
26 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
27 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
28 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
29 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
30 * OTHER DEALINGS IN THE SOFTWARE.
31 **/
32(function ($) {
33    $.fn.extend({
34        BlackAndWhite: function (options) {
35            'use strict';
36            var container = this,
37                self = this,
38                defaults = {
39                    hoverEffect: true,
40                    webworkerPath: false,
41                    responsive: true,
42                    invertHoverEffect: false,
43                    speed: 500
44                };
45                options = $.extend(defaults, options);
46            //@public vars
47            var hoverEffect = options.hoverEffect,
48                webworkerPath = options.webworkerPath,
49                invertHoverEffect = options.invertHoverEffect,
50                responsive = options.responsive,
51                fadeSpeedIn = $.isPlainObject(options.speed) ? options.speed.fadeIn : options.speed,
52                fadeSpeedOut = $.isPlainObject(options.speed) ? options.speed.fadeOut : options.speed;
53            //@private var
54            var supportsCanvas = !!document.createElement('canvas').getContext,
55                $window = $(window);
56            /* Check if Web Workers are supported */
57            var supportWebworker = (function () {
58                    return (typeof (Worker) !== "undefined") ? true : false;
59                }());
60
61            var isIE7 = $.browser.msie && +$.browser.version === 7;
62            //@private methods
63            //convert any image into B&W using HTML5 canvas
64            var greyImages = function (img, canvas, width, height) {
65                var ctx = canvas.getContext('2d'),
66                    currImg = img,
67                    i = 0,
68                    grey;
69
70                ctx.drawImage(img, 0, 0, width, height);
71
72                var imageData = ctx.getImageData(0, 0, width, height),
73                    px = imageData.data,
74                    length = px.length;
75
76                // web worker superfast implementation
77                if (supportWebworker && webworkerPath) {
78
79                    var BnWWorker = new Worker(webworkerPath + "BnWWorker.js");
80
81                    BnWWorker.postMessage(imageData);
82
83                    BnWWorker.onmessage = function (event) {
84                        ctx.putImageData(event.data, 0, 0);
85                    };
86                } else {
87
88                    // no webworker slow implementation
89                    for (; i < length; i += 4) {
90                        grey = px[i] * 0.3 + px[i + 1] * 0.59 + px[i + 2] * 0.11;
91                        px[i] = px[i + 1] = px[i + 2] = grey;
92                    }
93
94                    ctx.putImageData(imageData, 0, 0);
95                }
96            };
97
98            var injectTags = function (pic, currImageWrapper) {
99        
100                var src = pic.src;
101
102                if (supportsCanvas && (!($.browser.msie && $.browser.version == '9.0'))) {
103

104                    var currWidth = $(currImageWrapper).find('img').width(),
105                        currHeight = $(currImageWrapper).find('img').height(),
106                        realWidth = pic.width,
107                        realHeight = pic.height;
108
109                    //adding the canvas
110                    $('<canvas width="' + realWidth + '" height="' + realHeight + '"></canvas>').prependTo(currImageWrapper);
111                    //getting the canvas
112                    var currCanvas = $(currImageWrapper).find('canvas');
113                    //setting the canvas position on the Pics
114                    $(currCanvas).css({
115                        'position': 'absolute',
116                        top: 0,
117                        left: 0,
118                        width: currWidth,
119                        height: currHeight,
120                        display: invertHoverEffect ? 'none' : 'block'
121                    });
122
123                    greyImages(pic, currCanvas[0], realWidth, realHeight);
124
125                    if (hoverEffect) {
126                        $(currImageWrapper).mouseenter(function () {
127                            if(!invertHoverEffect) {
128                                $(this).find('canvas').stop(true, true).fadeOut(fadeSpeedOut);
129                            } else {
130                                $(this).find('canvas').stop(true, true).fadeIn(fadeSpeedIn);
131                            }
132                        });
133                        $(currImageWrapper).mouseleave(function () {
134                            if(!invertHoverEffect) {
135                                $(this).find('canvas').stop(true, true).fadeIn(fadeSpeedIn);
136                            } else {
137                                $(this).find('canvas').stop(true, true).fadeOut(fadeSpeedOut);
138                            }
139                        });
140                    }
141                } else {
142
143                    var ieWidth = $(currImageWrapper).find('img').prop('width');
144                    var ieHeight = $(currImageWrapper).find('img').prop('height');
145
146                    //adding the canvas
147                    $('<img src=' + src + ' width="' + ieWidth + '" height="' + ieHeight + '" class="ieFix" /> ').prependTo(currImageWrapper);
148                    $('.ieFix').css({
149                        'position': 'absolute',
150                        top: 0,
151                        left: 0,
152                        'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)',
153                        display: invertHoverEffect ? 'none' : 'block'
154                    });
155
156                    if (hoverEffect) {
157                        $(currImageWrapper).mouseenter(function () {
158                            if(!invertHoverEffect) {
159                                $(this).children('.ieFix').stop(true, true).fadeOut(fadeSpeedOut);
160                            } else {
161                                $(this).children('.ieFix').stop(true, true).fadeIn(fadeSpeedIn);
162                            }
163                        });
164                        $(currImageWrapper).mouseleave(function () {
165                            if(!invertHoverEffect) {
166                                $(this).children('.ieFix').stop(true, true).fadeIn(fadeSpeedIn);
167                            } else {
168                                $(this).children('.ieFix').stop(true, true).fadeOut(fadeSpeedOut);
169                            }
170                        });
171                    }
172                }
173            };
174            this.init = function (options) {
175                if( $.browser.msie ) return false;
176                $(container).each(function (index, currImageWrapper) {
177                    var pic = new Image();
178                    pic.src = $(currImageWrapper).find('img').prop("src");
179
180                    if (!pic.width) {
181                        $(pic).on("load", function() {injectTags( pic, currImageWrapper);});
182                    } else {
183                        injectTags( pic, currImageWrapper );
184                    }
185                });
186
187                
188                if (responsive) {
189                    $window.on('resize orientationchange', container.resizeImages);
190                }
191            };
192
193            this.resizeImages = function () {
194                
195                $(container).each(function (index, currImageWrapper) {
196                    var pic = $(currImageWrapper).find('img:not(.ieFix)');

197                    var currWidth,currHeight;
198                    if (isIE7) {
199                        currWidth = $(pic).prop('width');
200                        currHeight = $(pic).prop('height');
201                    } else {
202                        currWidth = $(pic).width();
203                        currHeight = $(pic).height();
204                    }
205
206                    $(this).find('.ieFix, canvas').css({
207                        width: currWidth,
208                        height: currHeight
209                    });
210
211                });
212            };
213
214            return self.init(options);
215
216        }
217
218    });
219}(jQuery));