{"_id":"@aurouscia/image-compress","_rev":"3-8eece25c6ee2f2dec7061e9133c993a8","name":"@aurouscia/image-compress","dist-tags":{"latest":"0.2.0"},"versions":{"0.0.0":{"name":"@aurouscia/image-compress","version":"0.0.0","author":{"name":"Au"},"license":"MIT","_id":"@aurouscia/image-compress@0.0.0","maintainers":[{"name":"aurouscia","email":"18971501210@189.cn"}],"dist":{"shasum":"0fef07d7d5311659d824559417bfd5bcdb4fa1be","tarball":"https://registry.npmjs.org/@aurouscia/image-compress/-/image-compress-0.0.0.tgz","fileCount":5,"integrity":"sha512-MyU2Ro1iLMWQdgcy9xaFV4Elsg+rkLtKc2QXeF11G88ZpJFdeGYB9Zm5tP822TY+CCLwOhxyX4+l3005dhsF8g==","signatures":[{"sig":"MEQCID6vpIExewbCJzL+b3nMb6+kbR/Zn2PpxLNRVWF7IM7HAiBCuVLQxVMwAdS7iS1dA6z/RuHurFCMh8RMwW+VfxNWZg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8720},"type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"ef74ccc11c99b33456c1b587f132a9355594a32c","scripts":{"dev":"vite --config vite.configDemo.ts","test":"vitest","build":"vite build","prepack":"npm run build","test:run":"vitest run","build-demo":"vite build --config vite.configDemo.ts"},"_npmUser":{"name":"aurouscia","email":"18971501210@189.cn"},"repository":{"url":"https://gitee.com/au114514/au-npm-pkgs","type":"git","directory":"packages/image-compress"},"_npmVersion":"11.13.0","description":"基于 canvas 的客户端图片压缩与缩放工具，支持 object-fit 风格的配置","directories":{},"_nodeVersion":"24.16.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.34","vite":"^7.3.1","vitest":"^4.1.6","typescript":"^5.9.3","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.7"},"_npmOperationalInternal":{"tmp":"tmp/image-compress_0.0.0_1781442515217_0.8337367819942014","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@aurouscia/image-compress","version":"0.1.0","author":{"name":"Au"},"license":"MIT","_id":"@aurouscia/image-compress@0.1.0","maintainers":[{"name":"aurouscia","email":"18971501210@189.cn"}],"dist":{"shasum":"746ad11ae841a461cfa435efef476253a9ca7758","tarball":"https://registry.npmjs.org/@aurouscia/image-compress/-/image-compress-0.1.0.tgz","fileCount":5,"integrity":"sha512-d+zNcVS5Ucqi21gf4ni5LlAriXDhrRydEikibqVF7WSD4RUJ6yDb8qLJdOU0Tr9UPYSrM277YWT1pXVt9baOqQ==","signatures":[{"sig":"MEYCIQDzoVIPhbwaFDVfqA6I5NhmC67W+0epXtrPynl1dordAwIhAJc/VXIiGFOIS/Xk4O8MtuXDUFcs7/xYj8TUWSsaQ5G0","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11515},"type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"6ba071ae81127087cd4a3209fec4f5ad9b2d9abe","scripts":{"dev":"vite --config vite.configDemo.ts","test":"vitest","build":"vite build","prepack":"npm run build","test:run":"vitest run","build-demo":"vite build --config vite.configDemo.ts"},"_npmUser":{"name":"aurouscia","email":"18971501210@189.cn"},"repository":{"url":"https://gitee.com/au114514/au-npm-pkgs","type":"git","directory":"packages/image-compress"},"_npmVersion":"11.14.1","description":"基于 canvas 的客户端图片压缩与缩放工具，支持 object-fit 风格的配置","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.34","vite":"^7.3.1","vitest":"^4.1.6","typescript":"^5.9.3","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.7"},"_npmOperationalInternal":{"tmp":"tmp/image-compress_0.1.0_1783158997147_0.02347999142831525","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@aurouscia/image-compress","version":"0.2.0","description":"基于 canvas 的客户端图片压缩与缩放工具，支持 object-fit 风格的配置","type":"module","license":"MIT","author":{"name":"Au"},"types":"./dist/index.d.ts","module":"./dist/index.js","repository":{"type":"git","url":"https://gitee.com/au114514/au-npm-pkgs","directory":"packages/image-compress"},"scripts":{"test":"vitest","test:run":"vitest run","build":"vite build","build-demo":"vite build --config vite.configDemo.ts","dev":"vite --config vite.configDemo.ts","prepack":"npm run build"},"devDependencies":{"@vitejs/plugin-vue":"^6.0.7","typescript":"^5.9.3","vite":"^7.3.1","vite-plugin-dts":"^4.5.4","vitest":"^4.1.6","vue":"^3.5.34"},"gitHead":"17ac05d5d0b54244b1df346aad87e12a01916226","_id":"@aurouscia/image-compress@0.2.0","_nodeVersion":"24.13.0","_npmVersion":"11.14.1","dist":{"integrity":"sha512-hGhMpH9RoAHXKWXaWSa85iFl20PSk4ifMll8YUmxWiOVnYjjGQi0PmoLTH2BH7wT1fbVMvFDUkpPxqDg6XEU1g==","shasum":"f16f7c44271d13b2081d92434a60f5c322a6d92c","tarball":"https://registry.npmjs.org/@aurouscia/image-compress/-/image-compress-0.2.0.tgz","fileCount":5,"unpackedSize":13305,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFVDi1KXddi+0gqTTwihdjf5MwWcmLRLPBhS43xWhwo/AiArOegidMg6FpholSFOn1SYF2P0MEb+/7lrWfnkvGFCPw=="}]},"_npmUser":{"name":"aurouscia","email":"18971501210@189.cn"},"directories":{},"maintainers":[{"name":"aurouscia","email":"18971501210@189.cn"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/image-compress_0.2.0_1783323545563_0.12416710774263873"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-14T13:08:35.034Z","modified":"2026-07-06T07:39:05.800Z","0.0.0":"2026-06-14T13:08:35.338Z","0.1.0":"2026-07-04T09:56:37.278Z","0.2.0":"2026-07-06T07:39:05.693Z"},"author":{"name":"Au"},"license":"MIT","repository":{"type":"git","url":"https://gitee.com/au114514/au-npm-pkgs","directory":"packages/image-compress"},"description":"基于 canvas 的客户端图片压缩与缩放工具，支持 object-fit 风格的配置","maintainers":[{"name":"aurouscia","email":"18971501210@189.cn"}],"readme":"# @aurouscia/image-compress\n\n客户端图片压缩与缩放工具，支持 Canvas 绘制、object-fit 模式、SVG 转栅格图及自定义输出格式。\n\n## 功能\n\n- **compressImage**：将图片（含 SVG）绘制到指定尺寸的 Canvas 上，支持 CSS `object-fit` 风格的填充模式（contain、cover、fill、none、scale-down）。\n- **resizeImage**：按最大宽高等比缩放图片（含 SVG），画布尺寸等于缩放后的图片尺寸，不会放大。\n- 输出格式与质量可调，默认输出 `image/webp`。\n- 支持按目标文件大小自动调整质量（仅 `image/jpeg` / `image/webp`）。\n- 支持 SVG 输入：自动解析 `width`、`height`、`viewBox` 作为原始尺寸，无尺寸时默认使用 512×512。\n\n## 安装\n\n```bash\nnpm install @aurouscia/image-compress\n```\n\n## 使用\n\n### compressImage\n\n将图片压缩到固定画布尺寸，使用 `objectFit` 控制绘制方式：\n\n```ts\nimport { compressImage } from '@aurouscia/image-compress'\n\nconst { blob, canvas, quality } = await compressImage(file, {\n  width: 300,\n  height: 300,\n  objectFit: 'contain',\n  type: 'image/webp',\n  quality: 0.8,\n})\n```\n\n### resizeImage\n\n按最大尺寸限制等比缩放，不超出限制也不放大：\n\n```ts\nimport { resizeImage } from '@aurouscia/image-compress'\n\nconst { blob, canvas, quality } = await resizeImage(file, {\n  maxWidth: 1920,\n  maxHeight: 1080,\n  type: 'image/webp',\n  quality: 0.9,\n})\n```\n\n### 目标文件大小\n\n通过 `targetSize`（字节）让输出文件尽量小于指定大小，仅对 `image/jpeg` 和 `image/webp` 有效：\n\n```ts\nimport { compressImage } from '@aurouscia/image-compress'\n\nconst { blob, quality } = await compressImage(file, {\n  width: 800,\n  height: 800,\n  targetSize: 100 * 1024, // 目标 100 KB\n  minQuality: 0.1,        // 最低可接受质量，默认 0.1\n  maxIterations: 10,      // 二分查找最大次数，默认 10\n})\n```\n\n## 选项说明\n\n| 选项 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| `width` | `number` | 原图宽度 | compressImage 专用，画布宽度 |\n| `height` | `number` | 原图高度 | compressImage 专用，画布高度 |\n| `objectFit` | `ObjectFit` | `'contain'` | compressImage 专用，绘制模式 |\n| `maxWidth` | `number` | 无限制 | resizeImage 专用，最大宽度 |\n| `maxHeight` | `number` | 无限制 | resizeImage 专用，最大高度 |\n| `type` | `string` | `'image/webp'` | 输出 MIME 类型 |\n| `quality` | `number` | `0.8` | 输出质量上限（0 ~ 1），配合 targetSize 时会从该值向下调整 |\n| `targetSize` | `number` | - | 目标文件大小（字节），仅对 `image/jpeg` / `image/webp` 有效 |\n| `minQuality` | `number` | `0.1` | 配合 targetSize 使用，最低可接受质量 |\n| `maxIterations` | `number` | `10` | 配合 targetSize 使用，质量二分查找最大迭代次数 |\n\n## 返回值\n\n两个函数都返回：\n\n```ts\n{\n  blob: Blob,\n  canvas: HTMLCanvasElement,\n  quality: number, // 实际使用的输出质量\n}\n```\n\n设置了 `targetSize` 时，`quality` 可能低于传入的 `quality`。\n\n## 开发\n\n```bash\n# 安装依赖\npnpm install\n\n# 构建库\npnpm run build\n\n# 运行演示项目\npnpm run dev\n\n# 运行测试\npnpm run test:run\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}