{"id":15357491,"url":"https://github.com/fregante/image-promise","last_synced_at":"2025-12-15T06:47:30.827Z","repository":{"id":46015983,"uuid":"55337336","full_name":"fregante/image-promise","owner":"fregante","description":"🎑🤞 Load one or more images, return a promise. Tiny, browser-only, no dependencies.","archived":false,"fork":false,"pushed_at":"2023-06-17T19:36:31.000Z","size":120,"stargazers_count":146,"open_issues_count":2,"forks_count":16,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-05-22T15:07:58.979Z","etag":null,"topics":["events","image","imagesloaded","onload","promise"],"latest_commit_sha":null,"homepage":"https://npm.im/image-promise","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fregante.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-04-03T08:41:54.000Z","updated_at":"2024-05-20T16:10:08.000Z","dependencies_parsed_at":"2023-07-12T16:01:14.779Z","dependency_job_id":null,"html_url":"https://github.com/fregante/image-promise","commit_stats":{"total_commits":100,"total_committers":7,"mean_commits":"14.285714285714286","dds":"0.20999999999999996","last_synced_commit":"f766be2059399d3da184b4b59d93a25b235d5c75"},"previous_names":["bfred-it/image-promise"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fimage-promise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fimage-promise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fimage-promise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fimage-promise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fregante","download_url":"https://codeload.github.com/fregante/image-promise/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406091,"owners_count":20933803,"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":["events","image","imagesloaded","onload","promise"],"created_at":"2024-10-01T12:35:29.770Z","updated_at":"2025-12-15T06:47:25.766Z","avatar_url":"https://github.com/fregante.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Deprecated\n\nSee https://github.com/fregante/image-promise/issues/27, use the native `img.decode()` instead.\n\n#  image-promise [![][badge-gzip]](#link-npm)\n\n  [badge-gzip]: https://img.shields.io/bundlephobia/minzip/image-promise.svg?label=gzipped\n  [link-npm]: https://www.npmjs.com/package/image-promise\n\n\u003cimg align=\"right\" width=\"400\" src=\"https://user-images.githubusercontent.com/1402241/81458802-b7a21580-919c-11ea-9599-377d7aee1670.gif\"\u003e\n\n\u003e Load one or more images, return a promise. Only 0.5KB, for the browser, no dependencies.\n\nIt can be used in two ways:\n\n- pass a URL: it will generate an `\u003cimg\u003e` and wait for it to load:\n\n\t```js\n\tloadImage('img.jpg').then(/* It's loaded! */)\n\t```\n\n- pass an `\u003cimg\u003e`: it will wait for it to load:\n\n\t```js\n\tconst img = document.querySelector('img.my-image');\n\tloadImage(img).then(/* It's loaded! */)\n\t```\n\n- pass an array of URLs and/or `\u003cimg\u003e`s, wait for them to load:\n\n\t```js\n\tconst img = document.querySelector('img.my-image');\n\tloadImage([img, 'loading.gif']).then(/* Both are loaded! */)\n\t```\n\n## Install\n\nYou can download the [standalone bundle](https://bundle.fregante.com/?pkg=image-promise\u0026global=loadImage)\n\nOr use `npm`:\n\n```sh\nnpm install image-promise\n```\n\n```js\n// This module is only offered as a ES Module\nimport loadImage from 'image-promise';\n```\n\n## Usage\n\n### One image\n\n`loadImage(image)` will return a Promise that resolves when the image load, or fails when the image\n\n```js\nconst image = 'cat.jpg';\n// const image = $('img')[0]; // it can also be an \u003cimg\u003e element\n\nloadImage(image)\n.then(function (img) {\n\tctx.drawImage(img, 0, 0, 10, 10);\n})\n.catch(function () {\n\tconsole.error('Image failed to load :(');\n});\n```\n\n### Multiple images\n\n`image-promise` can load multiple images at a time\n\n```js\nconst images = ['cat.jpg', 'dog.jpg'];\n// const images = $('img'); // it can also be a jQuery object\n// const images = document.querySelectorAll('img'); // or a NodeList\n\nloadImage(images)\n.then(function (allImgs) {\n\tconsole.log(allImgs.length, 'images loaded!', allImgs);\n})\n.catch(function (err) {\n\tconsole.error('One or more images have failed to load :(');\n\tconsole.error(err.errored);\n\tconsole.info('But these loaded fine:');\n\tconsole.info(err.loaded);\n});\n```\n\n### Set custom attributes\n\n`loadImage(image, attributes)` lets you pass as the second argument an object of attributes you want to assign to the image element before it starts loading.\n\nThis is useful for example when you need [CORS enabled image](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image), where you need to set the attribute `crossorigin=\"anonymous\"` before the image starts downloading.\n\n```js\nconst image = 'https://catpics.com/cat.jpg';\n\nloadImage(image, { crossorigin: 'anonymous' })\n.then(function (img) {\n\tctx.drawImage(img, 0, 0, 10, 10);\n\n\t// now you can do this\n\tcanvas.toDataURL('image/png')\n})\n.catch(function () {\n\tconsole.error('Image failed to load :(');\n});\n```\n\n## Dependencies\n\nNone! But you need to polyfill `window.Promise` in IE11 and lower.\n\n## License\n\nMIT © [Federico Brigante](https://bfred.it)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffregante%2Fimage-promise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffregante%2Fimage-promise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffregante%2Fimage-promise/lists"}