{"id":13671989,"url":"https://github.com/ipanardian/jquery-image-reader","last_synced_at":"2025-04-27T02:32:58.619Z","repository":{"id":57282162,"uuid":"55134357","full_name":"ipanardian/jquery-image-reader","owner":"ipanardian","description":"A jQuery plugin that previews image very fast without needing to upload to your server.","archived":false,"fork":false,"pushed_at":"2018-10-01T04:12:11.000Z","size":79,"stargazers_count":7,"open_issues_count":1,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T15:35:02.200Z","etag":null,"topics":["drag-and-drop","image-preview","javascript","jquery","jquery-plugin","upload-images"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ipanardian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-31T08:40:14.000Z","updated_at":"2023-04-28T11:54:07.000Z","dependencies_parsed_at":"2022-09-11T07:01:29.817Z","dependency_job_id":null,"html_url":"https://github.com/ipanardian/jquery-image-reader","commit_stats":null,"previous_names":["ipanardian/image-preview-js"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipanardian%2Fjquery-image-reader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipanardian%2Fjquery-image-reader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipanardian%2Fjquery-image-reader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipanardian%2Fjquery-image-reader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ipanardian","download_url":"https://codeload.github.com/ipanardian/jquery-image-reader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251080744,"owners_count":21533142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-and-drop","image-preview","javascript","jquery","jquery-plugin","upload-images"],"created_at":"2024-08-02T09:01:23.586Z","updated_at":"2025-04-27T02:32:58.039Z","avatar_url":"https://github.com/ipanardian.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# jQuery Image Reader\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/ipanardian/jquery-image-reader/issues) \n[![Release](https://img.shields.io/badge/release-v1.1.0-orange.svg)](https://github.com/ipanardian/jquery-image-reader/releases)\n[![Dependencies](https://img.shields.io/badge/dependencies-jQuery%203.x-blue.svg)](https://jquery.com/)\n[![GitHub license](https://img.shields.io/badge/license-MIT-red.svg)](https://raw.githubusercontent.com/ipanardian/jquery-image-reader/master/LICENSE)\n[![npm](https://img.shields.io/npm/dt/jquery-image-reader.svg)]()\n\nA jQuery plugin that previews image very fast without needing to upload to your server. Just drag and drop it then images will be previewed.\n\nThis 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.\n\n## Demo\n\u003ca href=\"http://ipanardian.github.io/jquery-image-reader\" target=\"_blank\" title=\"Demo jQuery Image Reader\"\u003ehttp://ipanardian.github.io/jquery-image-reader\u003c/a\u003e\n\n## Usage\n```html\n\u003c!-- HTML --\u003e\n\u003cinput type=\"file\" id=\"upload-file\" multiple /\u003e\u003cbr/\u003e\n\u003cdiv id=\"image-preview\"\u003e\u003c/div\u003e\n```\n\n```js\n// Simple call\n$('#upload-file').imageReader();\n\n// With config and callback\n$('#upload-file').imageReader({\n    destination: '#image-preview',\n    onload: function(img) {\n        // your callback code\n        console.log({\n            width: img.width,\n            height: img.height\n        });\n        $(img).css('margin-top', '20px');\n    }\n});\n\n// Canvas\n$('#upload-file').imageReader({\n    renderType: 'canvas',\n    onload: function(canvas) {\n        // do some cool things with canvas\n        // fill text or pixel manipulation\n        var ctx = canvas.getContext('2d');\n        ctx.font = \"20px Verdana\";\n        ctx.fillStyle = \"blue\";\n        ctx.fillText(\"jQuery Image Reader\", 10, 30);\n    }\n});\n```\n\n## Install\n```\nbower install jquery-image-reader  \n\nnpm i jquery-image-reader\n```\n\n## Browser compatibility\nThe Uncompressed file implement new features from the JavaScript ECMA-262 specification (ES6) while the compressed file has transpiled using Babel.js into equivalent code.\n \nTested on Chrome 49, Safari 9.1, Firefox 43. Chrome and Firefox for Android. iPhone 5 \u0026 6s\n\n[https://developer.mozilla.org/en-US/docs/Web/API/FileReader#Browser_compatibility](https://developer.mozilla.org/en-US/docs/Web/API/FileReader#Browser_compatibility)\n\n## License\nThe MIT License (MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipanardian%2Fjquery-image-reader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fipanardian%2Fjquery-image-reader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipanardian%2Fjquery-image-reader/lists"}