{"_id":"@barkleapp/browser-image-resizer","name":"@barkleapp/browser-image-resizer","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@barkleapp/browser-image-resizer","version":"2.0.0","description":"A browser-based utility to downscale and resize images using OffscreenCanvas","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js","types":"./dist/index.d.ts"}},"author":{"name":"Eric Nograles","email":"grales@gmail.com"},"license":"MIT","packageManager":"pnpm@8.6.12","devDependencies":{"esbuild":"^0.18.20","typescript":"^5.3.3"},"scripts":{"build":"NODE_ENV=production node build.js && tsc --project tsconfig.build.json","dev":"node build.js watch","test":"cd tests/vite-project && pnpm run dev"},"repository":{"type":"git","url":"git+https://github.com/BarkleAPP/browser-image-resizer.git"},"_id":"@barkleapp/browser-image-resizer@2.0.0","gitHead":"dc23bef23f30c0b0659a9b20a264b6fa9aa61661","bugs":{"url":"https://github.com/BarkleAPP/browser-image-resizer/issues"},"homepage":"https://github.com/BarkleAPP/browser-image-resizer#readme","_nodeVersion":"20.15.1","_npmVersion":"10.7.0","dist":{"integrity":"sha512-yeQTwfUONPHkDV4WJnA3ZEzL7x0rwkJbkFzNGrfb2aM4uoEiLgn+/kxH99qumcLc/EPsh46Gsyh10L55JcVOzw==","shasum":"04158efbea5b07e82c269518c2eb2cbcd5318a09","tarball":"https://registry.npmjs.org/@barkleapp/browser-image-resizer/-/browser-image-resizer-2.0.0.tgz","fileCount":9,"unpackedSize":57831,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDuEfHW6V8Lz91eNhFbcVlCKLa7tBQ9d9Yaau9TEq+IwIgYTbZ1/XvSbZpYrp+PejnAY/aSzQuamHA7m+lvzO+8SE="}]},"_npmUser":{"name":"aidanthebandit","email":"aidan@banditco.dev"},"directories":{},"maintainers":[{"name":"aidanthebandit","email":"aidan@banditco.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/browser-image-resizer_2.0.0_1723325093031_0.29448685254517315"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-10T21:24:52.953Z","2.0.0":"2024-08-10T21:24:53.201Z","modified":"2024-08-10T21:24:53.473Z"},"maintainers":[{"name":"aidanthebandit","email":"aidan@banditco.dev"}],"description":"A browser-based utility to downscale and resize images using OffscreenCanvas","homepage":"https://github.com/BarkleAPP/browser-image-resizer#readme","repository":{"type":"git","url":"git+https://github.com/BarkleAPP/browser-image-resizer.git"},"author":{"name":"Eric Nograles","email":"grales@gmail.com"},"bugs":{"url":"https://github.com/BarkleAPP/browser-image-resizer/issues"},"license":"MIT","readme":"# browser-image-resizer\n\n## Introduction\n\nThis library allows for cross-browser image downscaling utilizing `OffscreenCanvas`. \n\n## Note\n\n- This is browser-only utility and will not work in Node.js.\n- Safari 16.4 or later is required due to the use of `OffscreenCanvas`.  \n  https://caniuse.com/offscreencanvas\n\n## Installation\n\n### NPM/Yarn/pnpm\n\n- `npm install @barkleapp/browser-image-resizer`\n- `yarn add @barkleapp/browser-image-resizer`\n- `pnpm add @barkleapp/browser-image-resizer`\n\n## Usage\n\n### In the main thread\n\n```typescript\nimport { readAndCompressImage } from 'browser-image-resizer';\n\nconst config = {\n  quality: 0.7,\n  width: 800,\n  height: 600\n};\n\n// Note: A single file comes from event.target.files on <input>\nasync function uploadImage(file) {\n  try {\n    let resizedImage = await readAndCompressImage(file, config);\n\n    const url = `http://localhost:3001/upload`;\n    const formData = new FormData();\n    formData.append('images', resizedImage);\n    const options = {\n      method: 'POST',\n      body: formData\n    };\n\n    let result = await fetch(url, options);\n\n    // TODO: Handle the result\n    console.log(result);\n    return result;\n  } catch (error) {\n    console.error(error);\n    throw(error);\n  }\n}\n```\n\n### In worker\nEven large images can be processed in a separate thread using a worker.\n\n#### worker.js\n\n```typescript\nimport { readAndCompressImage } from \"browser-image-resizer\";\n\nonmessage = async (e) => {\n    const converted = await readAndCompressImage(e.data, { maxWidth: 300 });\n    postMessage(converted, [converted]);\n}\n```\n\n#### Main Thread\n\n```typescript\nconst worker = new Worker('worker.js');\n\nconst img = document.getElementById('viewer_img');\nworker.onmessage = (e) => {\n  img.src = URL.createObjectURL(e.data);\n};\n\nasync function convert(file: File) {\n  const bmp = await createImageBitmap(file);\n  worker.postMessage(bmp, [bmp]);\n}\n```\n\n## API\n\n### `readAndCompressImage(file, config) => Promise<Blob | OffscreenCanvas>`\n\n#### Inputs\n\n* `file`: An image source that createImageBitmap can read.   \n  See https://developer.mozilla.org/en-US/docs/Web/API/createImageBitmap\n* `config`: See below\n\n| Property Name        | Purpose           | Default Value  |\n| ------------- |-------------| -----:|\n| `argorithm` | Algorithm used for downscaling (see below) | 'null' |\n| `processByHalf` | Whether to process downscaling by `drawImage(source, 0, 0, source.width / 2, source.height / 2)` until the size is smaller than twice the target size. | true |\n| `quality`      | The quality of jpeg (or webp) | 0.5 |\n| `maxWidth`      | The maximum width for the downscaled image | 800 |\n| `maxHeight` | The maximum height for the downscaled image | 600 |\n| `debug` | console.log image update operations | false |\n| `mimeType` | specify image output type other than jpeg / If set `null`, function returns OffscreenCanvas  | 'image/jpeg' |\n\n##### `argorithm`\n\n* `null`: Just resize with `drawImage()`. The best quality and fastest.\n* `bilinear`: Better quality, slower. Comes from upstream (ericnogralesbrowser-image-resizer).\n* `hermite`: Worse quality, faster. Comes from [viliusle/Hermite-resize](https://github.com/viliusle/Hermite-resize). Will dispatch workers for better performance.\n* `hermite_single`: Worse quality, faster. Single-threaded.\n\n#### Outputs\n\nA Promise that yields an Image Blob or OffscreenCanvas\n\n### `calculateSize(src, config)`\n`calculateSize(src: { width: number; height: number; }, config) => { width: number; height: number; }`\n\nWith this function you can get the pre-calculated width and height of the resulting image.\n\n### Output Image Specification\nThe output image is derived from `OffscreenCanvas.convertToBlob`.  \nhttps://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/convertToBlob\n\n- EXIF and other metadata will be erased.\n- Rotation will be automatically corrected.\n  * It is based on the specifications of recent versions of modern browsers and may not work with older browsers.\n  * See https://github.com/w3c/csswg-drafts/issues/4666#issuecomment-610962845\n  * Firefox support seems to be available from version 78. [by mei23](https://github.com/misskey-dev/misskey/pull/8216#issuecomment-1041382112)\n- Color profile is srgb. Firefox 97 does not attach the ICC profile, but Chrome does.\n- You can specify image/webp as the mimeType but [Safari does not support.](https://developer.apple.com/documentation/webkitjs/htmlcanvaselement/1630000-todataurl).\n","readmeFilename":"README.md"}