jQuery Image Reader by Ipan Ardian

├── .babelrc ├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── example ├── index.html ├── script.js └── stylesheets │ ├── github-light.css │ ├── normalize.css │ └── stylesheet.css ├── gulpfile.js ├── jquery.imagereader-1.1.0.js ├── jquery.imagereader-1.1.0.min.js └── package.json /.babelrc: -------------------------------------------------------------------------------- 1 | { "presets": ["es2015"] } 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.css linguist-language=JavaScript -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .vscode/ 3 | typings/ 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Ipan Ardian 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery Image Reader 2 | [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/ipanardian/jquery-image-reader/issues) 3 | [![Release](https://img.shields.io/badge/release-v1.1.0-orange.svg)](https://github.com/ipanardian/jquery-image-reader/releases) 4 | [![Dependencies](https://img.shields.io/badge/dependencies-jQuery%203.x-blue.svg)](https://jquery.com/) 5 | [![GitHub license](https://img.shields.io/badge/license-MIT-red.svg)](https://raw.githubusercontent.com/ipanardian/jquery-image-reader/master/LICENSE) 6 | [![npm](https://img.shields.io/npm/dt/jquery-image-reader.svg)]() 7 | 8 | A jQuery plugin that previews image very fast without needing to upload to your server. Just drag and drop it then images will be previewed. 9 | 10 | This plugin implement FileReader API so you can asynchronously read the contents and avoid server uploads of raw user files. You can also pre-treat content like fill text or pixel manipulation before you manually upload user content to your servers. 11 | 12 | ## Demo 13 | http://ipanardian.github.io/jquery-image-reader 14 | 15 | ## Usage 16 | ```html 17 | 18 |
19 |

20 | ``` 21 | 22 | ```js 23 | // Simple call 24 | $('#upload-file').imageReader(); 25 | 26 | // With config and callback 27 | $('#upload-file').imageReader({ 28 | destination: '#image-preview', 29 | onload: function(img) { 30 | // your callback code 31 | console.log({ 32 | width: img.width, 33 | height: img.height 34 | }); 35 | $(img).css('margin-top', '20px'); 36 | } 37 | }); 38 | 39 | // Canvas 40 | $('#upload-file').imageReader({ 41 | renderType: 'canvas', 42 | onload: function(canvas) { 43 | // do some cool things with canvas 44 | // fill text or pixel manipulation 45 | var ctx = canvas.getContext('2d'); 46 | ctx.font = "20px Verdana"; 47 | ctx.fillStyle = "blue"; 48 | ctx.fillText("jQuery Image Reader", 10, 30); 49 | } 50 | }); 51 | ``` 52 | 53 | ## Install 54 | ``` 55 | bower install jquery-image-reader 56 | 57 | npm i jquery-image-reader 58 | ``` 59 | 60 | ## Browser compatibility 61 | The Uncompressed file implement new features from the JavaScript ECMA-262 specification (ES6) while the compressed file has transpiled using Babel.js into equivalent code. 62 | 63 | Tested on Chrome 49, Safari 9.1, Firefox 43. Chrome and Firefox for Android. iPhone 5 & 6s 64 | 65 | [https://developer.mozilla.org/en-US/docs/Web/API/FileReader#Browser_compatibility](https://developer.mozilla.org/en-US/docs/Web/API/FileReader#Browser_compatibility) 66 | 67 | ## License 68 | The MIT License (MIT) 69 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-image-reader", 3 | "homepage": "https://github.com/ipanardian/jquery-image-reader", 4 | "authors": [ 5 | "ipanardian " 6 | ], 7 | "description": "A jQuery plugin that previews image very fast without needing to upload to your server", 8 | "main": "jquery.imagereader.js", 9 | "dependencies": { 10 | "jquery": "3.x" 11 | }, 12 | "resolutions": { 13 | "jquery": "3.x" 14 | }, 15 | "keywords": [ 16 | "jquery", 17 | "plugin", 18 | "image", 19 | "reader", 20 | "image", 21 | "upload", 22 | "upload", 23 | "file", 24 | "ipan", 25 | "ardian" 26 | ], 27 | "license": "MIT" 28 | } 29 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Image Reader by Ipan Ardian 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 21 | 22 |

23 |

24 |

25 |

26 | Drag and drop images here 27 | 28 |

29 |

30 |

31 |

32 | 33 | 42 |

43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /example/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | $('#upload-file').imageReader({ 3 | onload: function (img) { 4 | console.log({ 5 | width: img.width, 6 | height: img.height 7 | }); 8 | } 9 | }); 10 | }); -------------------------------------------------------------------------------- /example/stylesheets/github-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License (MIT) 3 | 4 | Copyright (c) 2015 GitHub, Inc. 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | 24 | */ 25 | 26 | .pl-c /* comment */ { 27 | color: #969896; 28 | } 29 | 30 | .pl-c1 /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */, 31 | .pl-s .pl-v /* string variable */ { 32 | color: #0086b3; 33 | } 34 | 35 | .pl-e /* entity */, 36 | .pl-en /* entity.name */ { 37 | color: #795da3; 38 | } 39 | 40 | .pl-s .pl-s1 /* string source */, 41 | .pl-smi /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ { 42 | color: #333; 43 | } 44 | 45 | .pl-ent /* entity.name.tag */ { 46 | color: #63a35c; 47 | } 48 | 49 | .pl-k /* keyword, storage, storage.type */ { 50 | color: #a71d5d; 51 | } 52 | 53 | .pl-pds /* punctuation.definition.string, string.regexp.character-class */, 54 | .pl-s /* string */, 55 | .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */, 56 | .pl-sr /* string.regexp */, 57 | .pl-sr .pl-cce /* string.regexp constant.character.escape */, 58 | .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */, 59 | .pl-sr .pl-sre /* string.regexp source.ruby.embedded */ { 60 | color: #183691; 61 | } 62 | 63 | .pl-v /* variable */ { 64 | color: #ed6a43; 65 | } 66 | 67 | .pl-id /* invalid.deprecated */ { 68 | color: #b52a1d; 69 | } 70 | 71 | .pl-ii /* invalid.illegal */ { 72 | background-color: #b52a1d; 73 | color: #f8f8f8; 74 | } 75 | 76 | .pl-sr .pl-cce /* string.regexp constant.character.escape */ { 77 | color: #63a35c; 78 | font-weight: bold; 79 | } 80 | 81 | .pl-ml /* markup.list */ { 82 | color: #693a17; 83 | } 84 | 85 | .pl-mh /* markup.heading */, 86 | .pl-mh .pl-en /* markup.heading entity.name */, 87 | .pl-ms /* meta.separator */ { 88 | color: #1d3e81; 89 | font-weight: bold; 90 | } 91 | 92 | .pl-mq /* markup.quote */ { 93 | color: #008080; 94 | } 95 | 96 | .pl-mi /* markup.italic */ { 97 | color: #333; 98 | font-style: italic; 99 | } 100 | 101 | .pl-mb /* markup.bold */ { 102 | color: #333; 103 | font-weight: bold; 104 | } 105 | 106 | .pl-md /* markup.deleted, meta.diff.header.from-file */ { 107 | background-color: #ffecec; 108 | color: #bd2c00; 109 | } 110 | 111 | .pl-mi1 /* markup.inserted, meta.diff.header.to-file */ { 112 | background-color: #eaffea; 113 | color: #55a532; 114 | } 115 | 116 | .pl-mdr /* meta.diff.range */ { 117 | color: #795da3; 118 | font-weight: bold; 119 | } 120 | 121 | .pl-mo /* meta.output */ { 122 | color: #1d3e81; 123 | } 124 | 125 | -------------------------------------------------------------------------------- /example/stylesheets/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | box-sizing: content-box; 213 | height: 0; 214 | } 215 | 216 | /** 217 | * Contain overflow in all browsers. 218 | */ 219 | 220 | pre { 221 | overflow: auto; 222 | } 223 | 224 | /** 225 | * Address odd `em`-unit font size rendering in all browsers. 226 | */ 227 | 228 | code, 229 | kbd, 230 | pre, 231 | samp { 232 | font-family: monospace, monospace; 233 | font-size: 1em; 234 | } 235 | 236 | /* Forms 237 | ========================================================================== */ 238 | 239 | /** 240 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 241 | * styling of `select`, unless a `border` property is set. 242 | */ 243 | 244 | /** 245 | * 1. Correct color not being inherited. 246 | * Known issue: affects color of disabled elements. 247 | * 2. Correct font properties not being inherited. 248 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 249 | */ 250 | 251 | button, 252 | input, 253 | optgroup, 254 | select, 255 | textarea { 256 | color: inherit; /* 1 */ 257 | font: inherit; /* 2 */ 258 | margin: 0; /* 3 */ 259 | } 260 | 261 | /** 262 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 263 | */ 264 | 265 | button { 266 | overflow: visible; 267 | } 268 | 269 | /** 270 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 271 | * All other form control elements do not inherit `text-transform` values. 272 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 273 | * Correct `select` style inheritance in Firefox. 274 | */ 275 | 276 | button, 277 | select { 278 | text-transform: none; 279 | } 280 | 281 | /** 282 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 283 | * and `video` controls. 284 | * 2. Correct inability to style clickable `input` types in iOS. 285 | * 3. Improve usability and consistency of cursor style between image-type 286 | * `input` and others. 287 | */ 288 | 289 | button, 290 | html input[type="button"], /* 1 */ 291 | input[type="reset"], 292 | input[type="submit"] { 293 | -webkit-appearance: button; /* 2 */ 294 | cursor: pointer; /* 3 */ 295 | } 296 | 297 | /** 298 | * Re-set default cursor for disabled elements. 299 | */ 300 | 301 | button[disabled], 302 | html input[disabled] { 303 | cursor: default; 304 | } 305 | 306 | /** 307 | * Remove inner padding and border in Firefox 4+. 308 | */ 309 | 310 | button::-moz-focus-inner, 311 | input::-moz-focus-inner { 312 | border: 0; 313 | padding: 0; 314 | } 315 | 316 | /** 317 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 318 | * the UA stylesheet. 319 | */ 320 | 321 | input { 322 | line-height: normal; 323 | } 324 | 325 | /** 326 | * It's recommended that you don't attempt to style these elements. 327 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 328 | * 329 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 330 | * 2. Remove excess padding in IE 8/9/10. 331 | */ 332 | 333 | input[type="checkbox"], 334 | input[type="radio"] { 335 | box-sizing: border-box; /* 1 */ 336 | padding: 0; /* 2 */ 337 | } 338 | 339 | /** 340 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 341 | * `font-size` values of the `input`, it causes the cursor style of the 342 | * decrement button to change from `default` to `text`. 343 | */ 344 | 345 | input[type="number"]::-webkit-inner-spin-button, 346 | input[type="number"]::-webkit-outer-spin-button { 347 | height: auto; 348 | } 349 | 350 | /** 351 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 352 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 353 | * (include `-moz` to future-proof). 354 | */ 355 | 356 | input[type="search"] { 357 | -webkit-appearance: textfield; /* 1 */ /* 2 */ 358 | box-sizing: content-box; 359 | } 360 | 361 | /** 362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 363 | * Safari (but not Chrome) clips the cancel button when the search input has 364 | * padding (and `textfield` appearance). 365 | */ 366 | 367 | input[type="search"]::-webkit-search-cancel-button, 368 | input[type="search"]::-webkit-search-decoration { 369 | -webkit-appearance: none; 370 | } 371 | 372 | /** 373 | * Define consistent border, margin, and padding. 374 | */ 375 | 376 | fieldset { 377 | border: 1px solid #c0c0c0; 378 | margin: 0 2px; 379 | padding: 0.35em 0.625em 0.75em; 380 | } 381 | 382 | /** 383 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 385 | */ 386 | 387 | legend { 388 | border: 0; /* 1 */ 389 | padding: 0; /* 2 */ 390 | } 391 | 392 | /** 393 | * Remove default vertical scrollbar in IE 8/9/10/11. 394 | */ 395 | 396 | textarea { 397 | overflow: auto; 398 | } 399 | 400 | /** 401 | * Don't inherit the `font-weight` (applied by a rule above). 402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 403 | */ 404 | 405 | optgroup { 406 | font-weight: bold; 407 | } 408 | 409 | /* Tables 410 | ========================================================================== */ 411 | 412 | /** 413 | * Remove most spacing between table cells. 414 | */ 415 | 416 | table { 417 | border-collapse: collapse; 418 | border-spacing: 0; 419 | } 420 | 421 | td, 422 | th { 423 | padding: 0; 424 | } 425 | -------------------------------------------------------------------------------- /example/stylesheets/stylesheet.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; } 3 | 4 | body { 5 | padding: 0; 6 | margin: 0; 7 | font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 8 | font-size: 16px; 9 | line-height: 1.5; 10 | color: #606c71; } 11 | 12 | a { 13 | color: #1e6bb8; 14 | text-decoration: none; } 15 | a:hover { 16 | text-decoration: underline; } 17 | 18 | .btn { 19 | display: inline-block; 20 | margin-bottom: 1rem; 21 | color: rgba(255, 255, 255, 0.7); 22 | background-color: rgba(255, 255, 255, 0.08); 23 | border-color: rgba(255, 255, 255, 0.2); 24 | border-style: solid; 25 | border-width: 1px; 26 | border-radius: 0.3rem; 27 | transition: color 0.2s, background-color 0.2s, border-color 0.2s; } 28 | .btn + .btn { 29 | margin-left: 1rem; } 30 | 31 | .btn:hover { 32 | color: rgba(255, 255, 255, 0.8); 33 | text-decoration: none; 34 | background-color: rgba(255, 255, 255, 0.2); 35 | border-color: rgba(255, 255, 255, 0.3); } 36 | 37 | @media screen and (min-width: 64em) { 38 | .btn { 39 | padding: 0.75rem 1rem; } } 40 | 41 | @media screen and (min-width: 42em) and (max-width: 64em) { 42 | .btn { 43 | padding: 0.6rem 0.9rem; 44 | font-size: 0.9rem; } } 45 | 46 | @media screen and (max-width: 42em) { 47 | .btn { 48 | display: block; 49 | width: 100%; 50 | padding: 0.75rem; 51 | font-size: 0.9rem; } 52 | .btn + .btn { 53 | margin-top: 1rem; 54 | margin-left: 0; } } 55 | 56 | .page-header { 57 | color: #fff; 58 | text-align: center; 59 | background-color: #159957; 60 | background-image: linear-gradient(120deg, #155799, #159957); } 61 | 62 | @media screen and (min-width: 64em) { 63 | .page-header { 64 | padding: 5rem 6rem; } } 65 | 66 | @media screen and (min-width: 42em) and (max-width: 64em) { 67 | .page-header { 68 | padding: 3rem 4rem; } } 69 | 70 | @media screen and (max-width: 42em) { 71 | .page-header { 72 | padding: 2rem 1rem; } } 73 | 74 | .project-name { 75 | margin-top: 0; 76 | margin-bottom: 0.1rem; } 77 | 78 | @media screen and (min-width: 64em) { 79 | .project-name { 80 | font-size: 3.25rem; } } 81 | 82 | @media screen and (min-width: 42em) and (max-width: 64em) { 83 | .project-name { 84 | font-size: 2.25rem; } } 85 | 86 | @media screen and (max-width: 42em) { 87 | .project-name { 88 | font-size: 1.75rem; } } 89 | 90 | .project-tagline { 91 | margin-bottom: 2rem; 92 | font-weight: normal; 93 | opacity: 0.7; } 94 | 95 | @media screen and (min-width: 64em) { 96 | .project-tagline { 97 | font-size: 1.25rem; } } 98 | 99 | @media screen and (min-width: 42em) and (max-width: 64em) { 100 | .project-tagline { 101 | font-size: 1.15rem; } } 102 | 103 | @media screen and (max-width: 42em) { 104 | .project-tagline { 105 | font-size: 1rem; } } 106 | 107 | .main-content :first-child { 108 | margin-top: 0; } 109 | .main-content img { 110 | max-width: 100%; } 111 | .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 { 112 | margin-top: 2rem; 113 | margin-bottom: 1rem; 114 | font-weight: normal; 115 | color: #159957; } 116 | .main-content p { 117 | margin-bottom: 1em; } 118 | .main-content code { 119 | padding: 2px 4px; 120 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; 121 | font-size: 0.9rem; 122 | color: #383e41; 123 | background-color: #f3f6fa; 124 | border-radius: 0.3rem; } 125 | .main-content pre { 126 | padding: 0.8rem; 127 | margin-top: 0; 128 | margin-bottom: 1rem; 129 | font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace; 130 | color: #567482; 131 | word-wrap: normal; 132 | background-color: #f3f6fa; 133 | border: solid 1px #dce6f0; 134 | border-radius: 0.3rem; } 135 | .main-content pre > code { 136 | padding: 0; 137 | margin: 0; 138 | font-size: 0.9rem; 139 | color: #567482; 140 | word-break: normal; 141 | white-space: pre; 142 | background: transparent; 143 | border: 0; } 144 | .main-content .highlight { 145 | margin-bottom: 1rem; } 146 | .main-content .highlight pre { 147 | margin-bottom: 0; 148 | word-break: normal; } 149 | .main-content .highlight pre, .main-content pre { 150 | padding: 0.8rem; 151 | overflow: auto; 152 | font-size: 0.9rem; 153 | line-height: 1.45; 154 | border-radius: 0.3rem; } 155 | .main-content pre code, .main-content pre tt { 156 | display: inline; 157 | max-width: initial; 158 | padding: 0; 159 | margin: 0; 160 | overflow: initial; 161 | line-height: inherit; 162 | word-wrap: normal; 163 | background-color: transparent; 164 | border: 0; } 165 | .main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after { 166 | content: normal; } 167 | .main-content ul, .main-content ol { 168 | margin-top: 0; } 169 | .main-content blockquote { 170 | padding: 0 1rem; 171 | margin-left: 0; 172 | color: #819198; 173 | border-left: 0.3rem solid #dce6f0; } 174 | .main-content blockquote > :first-child { 175 | margin-top: 0; } 176 | .main-content blockquote > :last-child { 177 | margin-bottom: 0; } 178 | .main-content table { 179 | display: block; 180 | width: 100%; 181 | overflow: auto; 182 | word-break: normal; 183 | word-break: keep-all; } 184 | .main-content table th { 185 | font-weight: bold; } 186 | .main-content table th, .main-content table td { 187 | padding: 0.5rem 1rem; 188 | border: 1px solid #e9ebec; } 189 | .main-content dl { 190 | padding: 0; } 191 | .main-content dl dt { 192 | padding: 0; 193 | margin-top: 1rem; 194 | font-size: 1rem; 195 | font-weight: bold; } 196 | .main-content dl dd { 197 | padding: 0; 198 | margin-bottom: 1rem; } 199 | .main-content hr { 200 | height: 2px; 201 | padding: 0; 202 | margin: 1rem 0; 203 | background-color: #eff0f1; 204 | border: 0; } 205 | 206 | @media screen and (min-width: 64em) { 207 | .main-content { 208 | max-width: 64rem; 209 | padding: 2rem 6rem; 210 | margin: 0 auto; 211 | font-size: 1.1rem; } } 212 | 213 | @media screen and (min-width: 42em) and (max-width: 64em) { 214 | .main-content { 215 | padding: 2rem 4rem; 216 | font-size: 1.1rem; } } 217 | 218 | @media screen and (max-width: 42em) { 219 | .main-content { 220 | padding: 2rem 1rem; 221 | font-size: 1rem; } } 222 | 223 | .site-footer { 224 | padding-top: 2rem; 225 | margin-top: 2rem; 226 | border-top: solid 1px #eff0f1; } 227 | 228 | .site-footer-owner { 229 | display: block; 230 | font-weight: bold; } 231 | 232 | .site-footer-credits { 233 | color: #819198; } 234 | 235 | @media screen and (min-width: 64em) { 236 | .site-footer { 237 | font-size: 1rem; } } 238 | 239 | @media screen and (min-width: 42em) and (max-width: 64em) { 240 | .site-footer { 241 | font-size: 1rem; } } 242 | 243 | @media screen and (max-width: 42em) { 244 | .site-footer { 245 | font-size: 0.9rem; } } 246 | 247 | .drop { 248 | background-color: #fff; } 249 | .drop:after { 250 | border: dashed 0.3rem rgba(0, 0, 0, 0.0875); } 251 | .drop .drop-label { 252 | color: rgba(0, 0, 0, 0.0875); } 253 | .drop:hover:after { 254 | border-color: rgba(0, 0, 0, 0.125); } 255 | .drop:hover .drop-label { 256 | color: rgba(0, 0, 0, 0.125); } 257 | 258 | #image-preview,.image-preview { 259 | background-color: #000; } 260 | .drop { 261 | min-width: 200px; 262 | min-height: 20rem; 263 | position: relative; 264 | overflow: hidden; 265 | cursor: pointer; 266 | margin: 0; } 267 | .drop:after { 268 | content: ""; 269 | position: absolute; 270 | top: 0; 271 | right: 0; 272 | left: 0; 273 | bottom: 0; } 274 | .drop.file-focus { 275 | border: 0; } 276 | .drop:hover { 277 | cursor: pointer; } 278 | .drop .drop-label { 279 | font-size: 2.4rem; 280 | font-weight: 300; 281 | line-height: 4rem; 282 | width: 32rem; 283 | text-align: center; 284 | position: absolute; 285 | top: 50%; 286 | margin-top: -1.5rem; 287 | left: 50%; 288 | margin-left: -16rem; } 289 | .drop input[type=file] { 290 | line-height: 50rem; 291 | position: absolute; 292 | top: 0; 293 | right: 0; 294 | bottom: 0; 295 | left: 0; 296 | height: 100%; 297 | width: 100%; 298 | opacity: 0; 299 | z-index: 10; 300 | cursor: pointer; } 301 | 302 | #image-preview, .image-preview { 303 | width: 100%; 304 | display: block; 305 | position: relative; 306 | z-index: 1; } 307 | #image-preview:empty, .image-preview:empty { 308 | display: none; } 309 | #image-preview img,.image-preview img { 310 | display: block; 311 | margin: 0 auto; 312 | width: 100%} 313 | #image-preview:after, .image-preview:after{ 314 | content: ""; 315 | position: absolute; 316 | top: 0; 317 | bottom: 0; 318 | right: 0; 319 | left: 0; 320 | border: solid 0.1rem rgba(0, 0, 0, 0.08); 321 | background: bottom center repeat-x url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABfCAMAAAAeT108AAABEVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoX7lMAAAAW3RSTlMBCHwGAwQFCgIMCw4PERITFBYXGRoNHR4gISIlJicpKiwuLzEzNDY3OTs8G0BBQ0VGSEpLTU9QUVRVVlhZW11eX2FiZGVmaGlrbG1ucHFyc3R1dnd4eXp7Pn1+eLXrxAAAADRJREFUCFtjYAACDmYGJkYmRiDJAMJMbEzMTP+ZeJgZmTChOFZR7FAPYi71IQMT0JXhTIwAN8YCxDyw89IAAAAASUVORK5CYII=); } 322 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Babel and uglify 3 | * 2016 Ipan Ardian 4 | */ 5 | 6 | const VERSION = '1.1.0' 7 | 8 | var gulp = require('gulp'), 9 | uglify = require('gulp-uglify'), 10 | rename = require('gulp-rename'), 11 | babel = require("gulp-babel"); 12 | 13 | var paths = { 14 | scripts : 'jquery.imagereader-'+VERSION+'.js', 15 | suffix : '.min', 16 | dest : './' 17 | }; 18 | 19 | gulp.task('default', function(){ 20 | return gulp.src(paths.scripts) 21 | .pipe(babel()) 22 | .pipe(uglify({ 23 | preserveComments: function (node, comment) { 24 | return /\/\//.test(comment.value); 25 | } 26 | })) 27 | .pipe(rename({ 28 | suffix: paths.suffix 29 | })) 30 | .pipe(gulp.dest(paths.dest)); 31 | }); -------------------------------------------------------------------------------- /jquery.imagereader-1.1.0.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery Image Reader v1.1.0 3 | * (c) 2016 Ipan Ardian 4 | * 5 | * A jQuery plugin that previews image very fast without needing to upload to your server 6 | * For details, see the web site: https://github.com/ipanardian/jquery-image-reader 7 | * The MIT License 8 | */ 9 | 10 | (function (factory) { 11 | if (typeof define === 'function' && define.amd) { 12 | define(['jquery'], factory) 13 | } 14 | else if (typeof module === 'object' && module.exports) { 15 | module.exports = (root, jQuery) => { 16 | if (jQuery === undefined) { 17 | if ( typeof window !== 'undefined' ) { 18 | jQuery = require('jquery') 19 | } 20 | else { 21 | jQuery = require('jquery')(root) 22 | } 23 | } 24 | factory(jQuery) 25 | return jQuery 26 | } 27 | } 28 | else { 29 | factory(jQuery) 30 | } 31 | }($ => { 32 | 'use strict' 33 | 34 | $.fn.imageReader = function (options) { 35 | var defaults = { 36 | // id destination 37 | destination: '#image-preview', 38 | 39 | // render type 40 | // canvas or 41 | // image (default) 42 | renderType: 'image', 43 | 44 | // callback when image has loaded 45 | onload() {} 46 | } 47 | var settings = Object.assign(defaults, options) 48 | 49 | if (!('FileReader' in window)) { 50 | console.error('Your browser does not support FileReader API') 51 | return 52 | } 53 | 54 | // allowed image type 55 | const IMAGE_TYPE = new Set([ 56 | 'image/jpeg', 57 | 'image/jpg', 58 | 'image/png', 59 | 'image/gif', 60 | 'image/svg+xml', 61 | 'image/bmp', 62 | 'image/x-icon', 63 | 'image/vnd.microsoft.icon' 64 | ]) 65 | 66 | let reader = { 67 | container: $(settings.destination), 68 | clearContainer () { 69 | this.container.html('') 70 | }, 71 | validateMimeType (type) { 72 | return IMAGE_TYPE.has(type) 73 | }, 74 | processRead (file) { 75 | if (!this.validateMimeType(file.type)) { 76 | console.warn('Invalid file type') 77 | return 78 | } 79 | 80 | try { 81 | let reader = new FileReader() 82 | reader.onload = e => { 83 | switch (settings.renderType) { 84 | case 'canvas': 85 | this.renderObjectToCanvas(file, e) 86 | break 87 | 88 | default: 89 | this.renderObjectToImage(file, e) 90 | break 91 | } 92 | } 93 | reader.readAsDataURL(file) 94 | } 95 | catch (err) { 96 | throw new Error(err.message) 97 | } 98 | }, 99 | createImage (e, onload) { 100 | let image = new Image() 101 | if (typeof onload === 'function') { 102 | image.onload = function() { 103 | onload(image) 104 | } 105 | } 106 | image.src = e.target.result 107 | }, 108 | renderObjectToImage (f, e) { 109 | this.createImage(e, (img) => { 110 | this.container.append(img) 111 | this.callback(f, img) 112 | }) 113 | }, 114 | renderObjectToCanvas (f, e) { 115 | let canvas = document.createElement('canvas') 116 | let ctx = canvas.getContext('2d') 117 | 118 | this.createImage(e, (img) => { 119 | canvas.width = img.width 120 | canvas.height = img.height 121 | ctx.drawImage(img, 0, 0) 122 | this.container.append(canvas) 123 | this.callback(f, canvas) 124 | }) 125 | }, 126 | callback (_this, obj) { 127 | settings.onload.call(_this, obj) 128 | } 129 | } 130 | 131 | return this.each(function () { 132 | $(this).on('change', () => { 133 | reader.clearContainer() 134 | for(let x = 0, xlen = this.files.length; x < xlen; x++) { 135 | reader.processRead(this.files[x]) 136 | } 137 | }) 138 | }) 139 | } 140 | })) -------------------------------------------------------------------------------- /jquery.imagereader-1.1.0.min.js: -------------------------------------------------------------------------------- 1 | "use strict";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};/** 2 | * jQuery Image Reader v1.1.0 3 | * (c) 2016 Ipan Ardian 4 | * 5 | * A jQuery plugin that previews image very fast without needing to upload to your server 6 | * For details, see the web site: https://github.com/ipanardian/jquery-image-reader 7 | * The MIT License 8 | */ 9 | !function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"===("undefined"==typeof module?"undefined":_typeof(module))&&module.exports?module.exports=function(n,t){return void 0===t&&(t="undefined"!=typeof window?require("jquery"):require("jquery")(n)),e(t),t}:e(jQuery)}(function(e){e.fn.imageReader=function(n){var t={destination:"#image-preview",renderType:"image",onload:function(){}},o=Object.assign(t,n);if(!("FileReader"in window))return void console.error("Your browser does not support FileReader API");var i=new Set(["image/jpeg","image/jpg","image/png","image/gif","image/svg+xml","image/bmp","image/x-icon","image/vnd.microsoft.icon"]),a={container:e(o.destination),clearContainer:function(){this.container.html("")},validateMimeType:function(e){return i.has(e)},processRead:function(e){var n=this;if(!this.validateMimeType(e.type))return void console.warn("Invalid file type");try{var t=new FileReader;t.onload=function(t){switch(o.renderType){case"canvas":n.renderObjectToCanvas(e,t);break;default:n.renderObjectToImage(e,t)}},t.readAsDataURL(e)}catch(i){throw new Error(i.message)}},createImage:function(e,n){var t=new Image;"function"==typeof n&&(t.onload=function(){n(t)}),t.src=e.target.result},renderObjectToImage:function(e,n){var t=this;this.createImage(n,function(n){t.container.append(n),t.callback(e,n)})},renderObjectToCanvas:function(e,n){var t=this,o=document.createElement("canvas"),i=o.getContext("2d");this.createImage(n,function(n){o.width=n.width,o.height=n.height,i.drawImage(n,0,0),t.container.append(o),t.callback(e,o)})},callback:function(e,n){o.onload.call(e,n)}};return this.each(function(){var n=this;e(this).on("change",function(){a.clearContainer();for(var e=0,t=n.files.length;t>e;e++)a.processRead(n.files[e])})})}}); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-image-reader", 3 | "version": "1.1.0", 4 | "description": "A jQuery plugin that previews image very fast without needing to upload to your server.", 5 | "main": "gulpfile.js", 6 | "directories": { 7 | "example": "example" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/ipanardian/image-preview-js.git" 15 | }, 16 | "keywords": [ 17 | "jquery", 18 | "plugin", 19 | "upload", 20 | "image", 21 | "preview", 22 | "reader", 23 | "file" 24 | ], 25 | "author": "Ipan Ardian", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/ipanardian/image-preview-js/issues" 29 | }, 30 | "homepage": "https://github.com/ipanardian/image-preview-js#readme" 31 | } 32 | --------------------------------------------------------------------------------