https://mobsquad.jp/js/imageProtection.js

1// imageProtection.js
2
3// imageProtection
4var imageProtection = function(event, obj) {
5
6  // space gif
7  var space_gif='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAICRAEAIf8LSkRJQjMyICAxLjA+CgpHSUYgRW5jb2RlciBmb3IgV2luMzIgKEpESUIzMikgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAoA';
8
9  // target url
10  var imageProtectionUrls = {
11    'atve'      : '/img/(jackets|artists|mainvisuals|information|artist_top(/[^/]+)?)/[^/]+[.][^/]+',
12    'flyingdog' : 'img/keyvisual/[^/]+[.][^/]+'
13  };
14
15  // protection target class
16  var imageProtectionClass = 'imageProtection';
17
18  // no protection target class
19  var _imageProtectionClass = '_imageProtection';
20
21  // get manual width function
22  var getManualWidth = function(elm) {
23    var size;
24    
25    size = elm.getAttribute('width');
26    if(size !== null && size.length > 0 && isNaN(size)) {
27      return size;
28    }
29
30    size = document.defaultView.getComputedStyle(elm, null).getPropertyValue('width');
31    if(size !== null && size.length > 0 && isNaN(size)) {
32      return size;
33    }
34
35    size = document.defaultView.getComputedStyle(elm, null).getPropertyValue('max-width');
36    if(size !== null && size.length > 0 && isNaN(size)) {
37      return size;
38    }
39
40    return null;
41  };
42
43  // get manual height function
44  var getManualHeight = function(elm) {
45    var size;
46    
47    size = elm.getAttribute('height');
48    if(size !== null && size.length > 0 && isNaN(size)) {
49      return size;
50    }
51
52    size = document.defaultView.getComputedStyle(elm, null).getPropertyValue('height');
53    if(size !== null && size.length > 0 && isNaN(size)) {
54      return size;
55    }
56
57    size = document.defaultView.getComputedStyle(elm, null).getPropertyValue('max-height');
58    if(size !== null && size.length > 0 && isNaN(size)) {
59      return size;
60    }
61
62    return null;
63  };
64
65  // get natural width size
66  var getNaturalWidth = function(elm){
67    var size;
68
69    // for Firefox, Safari, Chrome, IE9, Opera
70    size = elm.naturalWidth;
71    if(size !== undefined) {
72      return size;
73    }
74
75    return null;
76  };
77
78  // get natural height size
79  var getNaturalHeight = function(elm){
80    var size;
81
82    // for Firefox, Safari, Chrome, IE9, Opera
83    size = elm.naturalHeight;
84    if(size !== undefined) {
85      return size;
86    }
87
88    return null;
89  };
90
91  // image elements
92  var imgs = {};
93  if(obj !== undefined && obj !== null) {
94    imgs[0] = obj;
95  }
96  else {
97    imgs = document.getElementsByTagName('IMG');
98  }
99
100  // target url regexp
101  var regExpUrls = {};
102  for(var i in imageProtectionUrls) {
103    regExpUrls[i] = new RegExp(imageProtectionUrls[i]);
104  }
105
106  // event cancel function
107  var eventCancel = function(event) {
108    if(event.preventDefault !== undefined) {
109      event.preventDefault();
110    }
111    return false;
112  };
113
114  for(var i1 in imgs) {
115    // image element
116    var imgElement = imgs[i1];
117
118    // image src
119    var src = imgElement.src;
120
121    // src 
122    if(src !== undefined && src !== null && src.length > 0) {
123
124      var classNames = imgElement.className.
125        replace( /(?:^[\x09\x0A\x0C\x0D\x20]+)|(?:[\x09\x0A\x0C\x0D\x20]+$)/g, "").
126        split( /[\x09\x0A\x0C\x0D\x20]+/ );
127
128      // is protection target
129      var isImageProtection = false;
130      var forceCancel = false;
131
132      for(var i2 in classNames) {
133
134        // protection class check
135        if(classNames[i2] === imageProtectionClass) {
136           isImageProtection = true;
137           break;
138         }
139
140        // no protection check
141        if(classNames[i2] === _imageProtectionClass) {
142          forceCancel = true;
143          break;
144        }
145      }
146
147      // protection url check
148      if (!isImageProtection && !forceCancel) {
149        for(var i2 in regExpUrls) {
150          if(src.match(regExpUrls[i2])) {
151            isImageProtection = true;
152            break;
153          }
154        }
155      }
156
157      // protection event
158      if(isImageProtection && !forceCancel) {
159
160        // no context manu event
161        evtListener(imgElement, 'contextmenu', eventCancel);
162
163        // image natural size

164        var naturalWidth = getNaturalWidth(imgElement);
165        var naturalHeight = getNaturalHeight(imgElement);
166
167        // old browser ignore
168        if(naturalWidth === null || naturalHeight === null) {
169          continue;
170        }
171
172        // image manual size
173        var width = getManualWidth(imgElement);
174        var height = getManualHeight(imgElement);
175
176        // check manual size
177        if(width !== null && height !== null) {
178          imgElement.setAttribute('width', width);
179          imgElement.setAttribute('height', height);
180        }
181        else {
182          // radio check
183          var WHRatio = naturalWidth / naturalHeight;
184
185          if(height === null) {
186            height = width / WHRatio;
187            imgElement.setAttribute('height', height);
188          }
189          else if(width === null) {
190            width = height * WHRatio;
191            imgElement.setAttribute('width', width);
192          }
193          else {
194            width = naturalWidth;
195            height = naturalHeight;
196          }
197        }
198
199        // style set
200        imgElement.style.backgroundSize       = '100% 100%';
201        imgElement.style.backgroundRepeat     = 'no-repeat';
202        imgElement.style.webkitBackgroundSize = '100% 100%';
203        imgElement.style.backgroundImage      = 'url(' + src + ')';
204        imgElement.setAttribute('src', space_gif);
205      }
206    }
207  }
208};
209
210// event listener function
211var evtListener = function(obj,evtHand,func) {
212  if(window.addEventListener){
213    obj.addEventListener(evtHand,func,false);
214  }
215  else if(window.attachEvent){
216    obj.attachEvent('on' + evtHand,func);
217  }
218  else{
219    obj['on' + evtHand] = func;
220  }
221};
222
223// set manual image protection
224setImageProtection = function(obj) {
225  imageProtection(null, obj);
226};
227
228// event set
229evtListener(window, 'load', imageProtection);