{"id":22025206,"url":"https://github.com/ronanyeah/ooft","last_synced_at":"2025-05-07T09:34:50.612Z","repository":{"id":57314913,"uuid":"48521906","full_name":"ronanyeah/ooft","owner":"ronanyeah","description":"image file size shrinker for front end","archived":false,"fork":false,"pushed_at":"2016-07-06T23:41:43.000Z","size":1203,"stargazers_count":3,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-24T01:06:37.138Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ooft","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ronanyeah.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":"2015-12-24T02:59:44.000Z","updated_at":"2017-09-21T21:23:30.000Z","dependencies_parsed_at":"2022-09-18T20:51:30.201Z","dependency_job_id":null,"html_url":"https://github.com/ronanyeah/ooft","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronanyeah%2Fooft","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronanyeah%2Fooft/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronanyeah%2Fooft/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ronanyeah%2Fooft/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ronanyeah","download_url":"https://codeload.github.com/ronanyeah/ooft/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252411843,"owners_count":21743613,"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":[],"created_at":"2024-11-30T07:14:59.945Z","updated_at":"2025-05-07T09:34:50.582Z","avatar_url":"https://github.com/ronanyeah.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ooft\n\nTakes an image file and shrinks it to a size of your liking, using only the wonders of JavaScript. Browser support is not great due it's use of several experimental APIs, especially `Blob` but I'm looking into alternative solutions. Can be used with [`browserify`](https://www.npmjs.com/package/browserify), [`webpack`](https://www.npmjs.com/package/webpack), or `dist/ooft.js` can be included directly in your project.\n\nWhy does this exist? I wanted to upload pictures from my phone quickly on a mobile connection and the \u003e3MB images the camera was taking were making it difficult.\n\n### Browser APIs in use\n- [`Uint8Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)\n- [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)\n- [`FileReader`](https://developer.mozilla.org/en/docs/Web/API/FileReader)\n\n### Example Usage:\n```\nlet options = {\n\n  // Desired output file size in MB.\n  // Required.\n  outputSize: 2,\n\n  // Percentage accuracy tolerance acceptable for output size.\n  // Default is 10%.\n  buffer: 10,\n\n  // Desired output format, 'jpg' or 'png'.\n  // Default is 'jpg'.\n  format: 'jpg'\n\n};\n```\n```\n\u003cinput id='imageFile' type='file' name='picture' accept='image/*' capture='camera'\u003e\n```\n```\nlet ooft = require('ooft');\n\nlet file = document.getElementById('imageFile').files[0];\n\nooft(file, options)\n.then( file =\u003e {\n\n  // http://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload\n  var formData = new FormData();\n  formData.append('image', file);\n\n  fetch('/upload', {\n    method: 'POST',\n    body: formData\n  });\n\n})\n.catch( err =\u003e console.log(err) );\n```\n\n### Issues\n- Can be unpredictable with large (~10MB) files.\n- Where many resizing cycles are necessary it can be quite slow.\n\n### BONUS!\n`tools/convertJpgToBase64.js` can be used to turn a jpg into an importable Base64 string like so:  \n`FILE=imageFileName node tools/convertJpgToBase64.js`  \n(Leave `.js` off the filename.)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fronanyeah%2Fooft","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fronanyeah%2Fooft","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fronanyeah%2Fooft/lists"}