├── CNAME ├── README.md ├── hidden_filters.json ├── LICENSE ├── index.html ├── script.js └── known_filters.json /CNAME: -------------------------------------------------------------------------------- 1 | vinci.pmmlabs.ru -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vinci-web 2 | Онлайн версия приложения Vinci 3 | 4 | Демо: http://vinci.pmmlabs.ru 5 | 6 | ### Использованное ПО 7 | 1. JQuery https://jquery.com 8 | 1. JQuery Form Plugin http://malsup.com/jquery/form 9 | 1. Lightbox 2 http://lokeshdhakar.com/projects/lightbox2 10 | 1. Cropper https://github.com/fengyuanchen/cropper 11 | 1. Bootstrap http://getbootstrap.com 12 | 1. crossorigin.me http://github.com/technoboy10/crossorigin.me 13 | 14 | ### Скриншот 15 | ![- 06 08 2016 - 11 53 21](https://cloud.githubusercontent.com/assets/2682026/17455824/4881749e-5bd5-11e6-9184-ca2b1da1210a.png) 16 | -------------------------------------------------------------------------------- /hidden_filters.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 6, 4 | "name": "Wind" 5 | }, 6 | { 7 | "id": 8, 8 | "name": "Prisma" 9 | }, 10 | { 11 | "id": 11, 12 | "name": "Kachkin" 13 | }, 14 | { 15 | "id": 14, 16 | "name": "14" 17 | }, 18 | { 19 | "id": 16, 20 | "name": "Modern" 21 | }, 22 | { 23 | "id": 17, 24 | "name": "Cardoso" 25 | }, 26 | { 27 | "id": 19, 28 | "name": "Malevich" 29 | }, 30 | { 31 | "id": 20, 32 | "name": "Clouds" 33 | }, 34 | { 35 | "id": 21, 36 | "name": "Suicide" 37 | }, 38 | { 39 | "id": 25, 40 | "name": "Berlin" 41 | }, 42 | { 43 | "id": 4101, 44 | "name": "Raphael-2" 45 | } 46 | ] -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Alexey Stepanov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vinci-web 6 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 28 | 29 | 30 |

31 |

32 |

Vinci-web

33 |

Реализация Vinci API

34 |

35 | Файл 36 | 39 |

40 |
41 |

Загрузить »

42 |

43 |

44 |
45 |

46 |

47 | 48 | Fork me on GitHub

52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const PROXY = 'http://cors.pmmlabs.ru/'; 2 | var endpoints = { 3 | 'list': 'http://vinci.camera/list', 4 | 'preload': 'http://vinci.camera/preload', 5 | 'process': 'http://vinci.camera/process' 6 | } 7 | , big = false 8 | , cropImg 9 | , filters 10 | , hidden_filters 11 | , row; 12 | 13 | function add_images(filter_set, image_id, sup) { 14 | for (var i in filter_set) { 15 | var src = PROXY + endpoints['process'] + '/' + image_id + '/' + filter_set[i].id; 16 | row.append($('

\ 17 | \ 18 |

\ 19 | \ 20 |

' + filter_set[i].name + (sup ? '^'+sup+'' : '') + '

\ 21 |

')); 22 | } 23 | } 24 | 25 | function renderResults(result) { 26 | row.empty(); 27 | $('input').val(''); 28 | add_images(filters, result.preload); 29 | add_images(hidden_filters, result.preload, '👁'); 30 | if (!lightbox.containerBottomPadding) 31 | lightbox.init(); 32 | } 33 | 34 | function onError() { 35 | alert('Ошибка загрузки! Попробуйте файл поменьше.'); 36 | } 37 | 38 | if (!HTMLCanvasElement.prototype.toBlob) { 39 | Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { 40 | value: function (callback, type, quality) { 41 | var binStr = atob( this.toDataURL(type, quality || 0.6).split(',')[1] ), 42 | len = binStr.length, 43 | arr = new Uint8Array(len); 44 | 45 | for (var i=0; i 1080 || this.height > 1440) && (this.height > 1080 || this.width > 1440); 67 | if (this.width < 200 || this.height < 200) { 68 | alert('Изображение должно быть больше чем 200x200') 69 | } else if (big) { 70 | $('#crop').html(this); 71 | $(this).cropper({ 72 | viewMode: 2, 73 | autoCropArea: 1, 74 | minCropBoxWidth: 200, 75 | minCropBoxHeight: 200 76 | }); 77 | $(cropImg).cropper('scale', (this.width ? $('#crop').width() / this.width : $('#crop').height() / this.height)).cropper('zoomTo', 1); 78 | } 79 | }; 80 | cropImg.src = e.target.result; 81 | }; 82 | reader.readAsDataURL(this.files[0]) 83 | }); 84 | 85 | $('#submit').click(function () { 86 | if (!big) 87 | $('#fileUpload').ajaxSubmit({ 88 | success: renderResults, 89 | error: onError 90 | }); 91 | else { 92 | $(cropImg).cropper('getCroppedCanvas').toBlob(function (blob) { 93 | var formData = new FormData(); 94 | formData.append('photo.jpg', blob, 'photo.jpg'); 95 | $('#crop').empty(); 96 | $.ajax(PROXY + endpoints['preload'], { 97 | method: "POST", 98 | data: formData, 99 | processData: false, 100 | contentType: false, 101 | success: renderResults, 102 | error: onError 103 | }); 104 | }, 'image/jpeg'); 105 | } 106 | }); 107 | }); 108 | -------------------------------------------------------------------------------- /known_filters.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "1", 4 | "name": "Sunny", 5 | "file": "http://vinci.camera/list/1/foxy.jpg", 6 | "new": 0, 7 | "load_text": "", 8 | "extra": 0, 9 | "extra_title": "", 10 | "extra_desc": "", 11 | "color": 0 12 | }, 13 | { 14 | "id": "2", 15 | "name": "Delaunay", 16 | "file": "http://vinci.camera/list/2/delaunay.jpg", 17 | "new": 0, 18 | "load_text": "", 19 | "extra": 0, 20 | "extra_title": "", 21 | "extra_desc": "", 22 | "color": 0 23 | }, 24 | { 25 | "id": "3", 26 | "name": "Mystic", 27 | "file": "http://vinci.camera/list/3/mystic.jpg", 28 | "new": 0, 29 | "load_text": "", 30 | "extra": 0, 31 | "extra_title": "", 32 | "extra_desc": "", 33 | "color": 0 34 | }, 35 | { 36 | "id": "4", 37 | "name": "Kandinsky", 38 | "file": "http://vinci.camera/list/4/artistic_1.jpg", 39 | "new": 0, 40 | "load_text": "", 41 | "extra": 0, 42 | "extra_title": "", 43 | "extra_desc": "", 44 | "color": 0 45 | }, 46 | { 47 | "id": "5", 48 | "name": "Pin-Up", 49 | "file": "http://vinci.camera/list/5/pinup.jpg", 50 | "new": 0, 51 | "load_text": "", 52 | "extra": 0, 53 | "extra_title": "", 54 | "extra_desc": "", 55 | "color": 0 56 | }, 57 | { 58 | "id": "7", 59 | "name": "Milk", 60 | "file": "http://vinci.camera/list/7/negron.jpg", 61 | "new": 0, 62 | "load_text": "", 63 | "extra": 0, 64 | "extra_title": "", 65 | "extra_desc": "", 66 | "color": 0 67 | }, 68 | { 69 | "id": "9", 70 | "name": "Fire", 71 | "file": "http://vinci.camera/list/9/fire.jpg", 72 | "new": 0, 73 | "load_text": "", 74 | "extra": 0, 75 | "extra_title": "", 76 | "extra_desc": "", 77 | "color": 0 78 | }, 79 | { 80 | "id": "10", 81 | "name": "Jesus", 82 | "file": "http://vinci.camera/list/10/vinci_2.jpg", 83 | "new": 0, 84 | "load_text": "", 85 | "extra": 0, 86 | "extra_title": "", 87 | "extra_desc": "", 88 | "color": 0 89 | }, 90 | { 91 | "id": "12", 92 | "name": "Poster", 93 | "file": "http://vinci.camera/list/12/poster.jpg", 94 | "new": 0, 95 | "load_text": "", 96 | "extra": 0, 97 | "extra_title": "", 98 | "extra_desc": "", 99 | "color": 0 100 | }, 101 | { 102 | "id": "13", 103 | "name": "Annenkov", 104 | "file": "http://vinci.camera/list/13/annenkov.jpg", 105 | "new": 0, 106 | "load_text": "", 107 | "extra": 0, 108 | "extra_title": "", 109 | "extra_desc": "", 110 | "color": 0 111 | }, 112 | { 113 | "id": "15", 114 | "name": "42", 115 | "file": "http://vinci.camera/list/15/42.jpg", 116 | "new": 0, 117 | "load_text": "", 118 | "extra": 0, 119 | "extra_title": "", 120 | "extra_desc": "", 121 | "color": 0 122 | }, 123 | { 124 | "id": "18", 125 | "name": "Girl", 126 | "file": "http://vinci.camera/list/18/girl.jpg", 127 | "new": 0, 128 | "load_text": "", 129 | "extra": 0, 130 | "extra_title": "", 131 | "extra_desc": "", 132 | "color": 0 133 | }, 134 | { 135 | "id": "24", 136 | "name": "Fabric", 137 | "file": "http://vinci.camera/list/24/fabric.jpg", 138 | "new": 0, 139 | "load_text": "", 140 | "extra": 0, 141 | "extra_title": "", 142 | "extra_desc": "", 143 | "color": 0 144 | }, 145 | { 146 | "id": "26", 147 | "name": "Harvest", 148 | "file": "http://vinci.camera/list/26/harvest.jpg", 149 | "new": 0, 150 | "load_text": "", 151 | "extra": 0, 152 | "extra_title": "", 153 | "extra_desc": "", 154 | "color": 0 155 | }, 156 | { 157 | "id": "27", 158 | "name": "Msqrd", 159 | "file": "http://vinci.camera/list/27/masquerade.jpg", 160 | "new": 0, 161 | "load_text": "", 162 | "extra": 0, 163 | "extra_title": "", 164 | "extra_desc": "", 165 | "color": 0 166 | }, 167 | { 168 | "id": "28", 169 | "name": "Witch", 170 | "file": "http://vinci.camera/list/28/witch.jpg", 171 | "new": 0, 172 | "load_text": "", 173 | "extra": 0, 174 | "extra_title": "", 175 | "extra_desc": "", 176 | "color": 0 177 | }, 178 | { 179 | "id": "29", 180 | "name": "Mars", 181 | "file": "http://vinci.camera/list/29/mars.jpg", 182 | "new": 0, 183 | "load_text": "", 184 | "extra": 0, 185 | "extra_title": "", 186 | "extra_desc": "", 187 | "color": 0 188 | }, 189 | { 190 | "id": "31", 191 | "name": "Tale", 192 | "file": "http://vinci.camera/list/31/tale2.jpg", 193 | "new": 0, 194 | "load_text": "", 195 | "extra": 0, 196 | "extra_title": "", 197 | "extra_desc": "", 198 | "color": 0 199 | }, 200 | { 201 | "id": "34", 202 | "name": "Shadow", 203 | "file": "http://vinci.camera/list/34/shadow.jpg", 204 | "new": 0, 205 | "load_text": "", 206 | "extra": 0, 207 | "extra_title": "", 208 | "extra_desc": "", 209 | "color": 0 210 | }, 211 | { 212 | "id": "35", 213 | "name": "Neon", 214 | "file": "http://vinci.camera/list/35/neon4.jpg", 215 | "new": 0, 216 | "load_text": "", 217 | "extra": 0, 218 | "extra_title": "", 219 | "extra_desc": "", 220 | "color": 0 221 | }, 222 | { 223 | "id": "36", 224 | "name": "Scndlnd", 225 | "file": "http://vinci.camera/list/36/scndlnd.jpg", 226 | "new": 1, 227 | "load_text": "", 228 | "extra": 0, 229 | "extra_title": "", 230 | "extra_desc": "", 231 | "color": 0 232 | }, 233 | { 234 | "id": "37", 235 | "name": "Ra", 236 | "file": "http://vinci.camera/list/37/ra3.jpg", 237 | "new": 1, 238 | "load_text": "", 239 | "extra": 0, 240 | "extra_title": "", 241 | "extra_desc": "", 242 | "color": 0 243 | }, 244 | { 245 | "id": "38", 246 | "name": "Ramayana", 247 | "file": "http://vinci.camera/list/38/ramayana.jpg", 248 | "new": 1, 249 | "load_text": "", 250 | "extra": 0, 251 | "extra_title": "", 252 | "extra_desc": "", 253 | "color": 0 254 | }, 255 | { 256 | "id": "39", 257 | "name": "Kallada", 258 | "file": "http://vinci.camera/list/39/kallada.jpg", 259 | "new": 1, 260 | "load_text": "", 261 | "extra": 0, 262 | "extra_title": "", 263 | "extra_desc": "", 264 | "color": 0 265 | }, 266 | { 267 | "id": "41", 268 | "name": "Raphael", 269 | "file": "http://vinci.camera/list/41/rafael.jpg", 270 | "new": 1, 271 | "load_text": "", 272 | "extra": 0, 273 | "extra_title": "", 274 | "extra_desc": "", 275 | "color": 0 276 | }, 277 | { 278 | "id": "42", 279 | "name": "Piranese", 280 | "file": "http://vinci.camera/list/42/piranese.jpg", 281 | "new": 1, 282 | "load_text": "", 283 | "extra": 0, 284 | "extra_title": "", 285 | "extra_desc": "", 286 | "color": 0 287 | }, 288 | { 289 | "id": "44", 290 | "name": "Transverse", 291 | "file": "http://vinci.camera/list/44/transverse.jpg", 292 | "new": 1, 293 | "load_text": "", 294 | "extra": 0, 295 | "extra_title": "", 296 | "extra_desc": "", 297 | "color": 0 298 | }, 299 | { 300 | "id": "45", 301 | "name": "Fiberglass", 302 | "file": "http://vinci.camera/list/45/vi.jpg", 303 | "new": 1, 304 | "load_text": "", 305 | "extra": 0, 306 | "extra_title": "", 307 | "extra_desc": "", 308 | "color": 0 309 | }, 310 | { 311 | "id": "46", 312 | "name": "Blood", 313 | "file": "http://vinci.camera/list/46/blood.jpg", 314 | "new": 1, 315 | "load_text": "", 316 | "extra": 0, 317 | "extra_title": "", 318 | "extra_desc": "", 319 | "color": 0 320 | }, 321 | { 322 | "id": "47", 323 | "name": "Bonfire", 324 | "file": "http://vinci.camera/list/47/bonfire.jpg", 325 | "new": 1, 326 | "load_text": "", 327 | "extra": 0, 328 | "extra_title": "", 329 | "extra_desc": "", 330 | "color": 0 331 | }, 332 | { 333 | "id": "48", 334 | "name": "Hellgun", 335 | "file": "http://vinci.camera/list/48/hellgun.jpg", 336 | "new": 1, 337 | "load_text": "", 338 | "extra": 0, 339 | "extra_title": "", 340 | "extra_desc": "", 341 | "color": 0 342 | }, 343 | { 344 | "id": "66", 345 | "name": "Ghost", 346 | "file": "http://vinci.camera/list/66/gh1.jpg", 347 | "new": 0, 348 | "load_text": "", 349 | "extra": 0, 350 | "extra_title": "", 351 | "extra_desc": "", 352 | "color": 0, 353 | "no_logo": 0 354 | }, 355 | { 356 | "id": "4201", 357 | "name": "Times", 358 | "file": "http://vinci.camera/list/4201/times.jpg", 359 | "new": 1, 360 | "load_text": "", 361 | "extra": 0, 362 | "extra_title": "", 363 | "extra_desc": "", 364 | "color": 0 365 | }, 366 | { 367 | "id": "4300", 368 | "name": "Marquet", 369 | "file": "http://vinci.camera/list/4300/marke.jpg", 370 | "new": 1, 371 | "load_text": "", 372 | "extra": 0, 373 | "extra_title": "", 374 | "extra_desc": "", 375 | "color": 0 376 | } 377 | ] --------------------------------------------------------------------------------