{"_id":"@byte.n/scroll-frame-canvas","_rev":"3-cb8cbd53978ad45357738596e520fa2a","name":"@byte.n/scroll-frame-canvas","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@byte.n/scroll-frame-canvas","version":"1.0.0","keywords":["scroll","canvas","frame","sequence","image-sequence","scroll-driven","animation","offscreen-canvas","progressive-loading"],"license":"MIT","_id":"@byte.n/scroll-frame-canvas@1.0.0","maintainers":[{"name":"byte.n","email":"dancingbytes@qq.com"}],"dist":{"shasum":"d0965eaba88d86ffd642e833836e963920e04dde","tarball":"https://registry.npmjs.org/@byte.n/scroll-frame-canvas/-/scroll-frame-canvas-1.0.0.tgz","fileCount":14,"integrity":"sha512-LjO+1iylRMIht/0TiXm3SFingg1/EOqTUH4ASP9HgJcYqVLzItHj6SKGqu//Bue/Vtv06BmZj20hG3fFdSrmyw==","signatures":[{"sig":"MEUCIBWxrCk4nSdH5fZbPp547hCHzIawiNTksCufkN310KEMAiEAm5nimrM6i6lvs9MZffQVB8iJckaxShTEc5OSxmjLQPQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45182},"main":"dist/scroll-frame-canvas.umd.js","type":"module","types":"dist/index.d.ts","unpkg":"dist/scroll-frame-canvas.umd.js","module":"dist/scroll-frame-canvas.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/scroll-frame-canvas.esm.js","default":"./dist/scroll-frame-canvas.esm.js"}},"gitHead":"7bf30a4e0a0f20bb0eaaff983992be9109f0b5d8","scripts":{"dev":"cross-env NODE_ENV=development webpack serve --config webpack.dev.config.js","build":"npm run clean && cross-env NODE_ENV=production webpack","clean":"rimraf dist","deploy":"gh-pages -d docs-dist","compile":"tsc","docs:build":"npm run clean && cross-env NODE_ENV=production webpack --config webpack.dev.config.js","type-check":"tsc --noEmit"},"_npmUser":{"name":"byte.n","email":"dancingbytes@qq.com"},"jsdelivr":"dist/scroll-frame-canvas.umd.js","_npmVersion":"10.8.2","description":"基于滚动条驱动的 Canvas 帧序列渲染器，支持渐进式大序列加载、OffscreenCanvas 预渲染与事件回调。","directories":{},"sideEffects":false,"_nodeVersion":"20.18.2","_hasShrinkwrap":false,"devDependencies":{"rimraf":"^5.0.7","webpack":"^5.93.0","gh-pages":"^6.3.0","cross-env":"^10.0.0","ts-loader":"^9.5.4","typescript":"^5.9.2","@types/node":"^24.3.1","webpack-cli":"^5.1.4","webpack-dev-server":"^5.0.4","copy-webpack-plugin":"^12.0.2","html-webpack-plugin":"^5.6.0"},"_npmOperationalInternal":{"tmp":"tmp/scroll-frame-canvas_1.0.0_1757240773102_0.37225442303462297","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@byte.n/scroll-frame-canvas","version":"1.0.1","keywords":["scroll","canvas","frame","sequence","image-sequence","scroll-driven","animation","offscreen-canvas","progressive-loading"],"license":"MIT","_id":"@byte.n/scroll-frame-canvas@1.0.1","maintainers":[{"name":"byte.n","email":"dancingbytes@qq.com"}],"dist":{"shasum":"244770684487f1dd91e2ee0ebce5849692fbfec1","tarball":"https://registry.npmjs.org/@byte.n/scroll-frame-canvas/-/scroll-frame-canvas-1.0.1.tgz","fileCount":2,"integrity":"sha512-Qxf9i7/UTCNA3VpBJQ+GZx5kWMeWwCKMevHKWC+OoH4TSm0WjPzUYYtt8zG8kSIYGFmbhUQj6XMWkH+5CflcZA==","signatures":[{"sig":"MEUCIFyzFyWKJ9XCRlbmHWjpi5NapMJfvVFLPnNbq8KOwR8EAiEAy8p9Cq6v181Tm4C7u97vSX98l96b2OxtA1oAnQVLo1U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4311},"main":"dist/scroll-frame-canvas.umd.js","type":"module","types":"dist/index.d.ts","unpkg":"dist/scroll-frame-canvas.umd.js","module":"dist/scroll-frame-canvas.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/scroll-frame-canvas.esm.js","default":"./dist/scroll-frame-canvas.esm.js"}},"gitHead":"8e79c2fd05c590afaeb86062bcb59c6c7cf495f0","scripts":{"dev":"cross-env NODE_ENV=development webpack serve --config webpack.dev.config.js","build":"npm run clean && cross-env NODE_ENV=production webpack","clean":"rimraf dist","deploy":"gh-pages -d docs-dist","compile":"tsc","docs:build":"npm run clean && cross-env NODE_ENV=production webpack --config webpack.dev.config.js","type-check":"tsc --noEmit"},"_npmUser":{"name":"byte.n","email":"dancingbytes@qq.com"},"jsdelivr":"dist/scroll-frame-canvas.umd.js","_npmVersion":"10.8.2","description":"基于滚动条驱动的 Canvas 帧序列渲染器，支持渐进式大序列加载、OffscreenCanvas 预渲染与事件回调。","directories":{},"sideEffects":false,"_nodeVersion":"20.18.2","_hasShrinkwrap":false,"devDependencies":{"rimraf":"^5.0.7","webpack":"^5.93.0","gh-pages":"^6.3.0","cross-env":"^10.0.0","ts-loader":"^9.5.4","typescript":"^5.9.2","@types/node":"^24.3.1","webpack-cli":"^5.1.4","webpack-dev-server":"^5.0.4","copy-webpack-plugin":"^12.0.2","html-webpack-plugin":"^5.6.0"},"_npmOperationalInternal":{"tmp":"tmp/scroll-frame-canvas_1.0.1_1757241703212_0.5728886812710732","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@byte.n/scroll-frame-canvas","version":"1.1.0","description":"基于滚动条驱动的 Canvas 帧序列渲染器，支持渐进式大序列加载、OffscreenCanvas 预渲染与事件回调。","type":"module","main":"dist/scroll-frame-canvas.umd.js","module":"dist/scroll-frame-canvas.esm.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/scroll-frame-canvas.esm.js","default":"./dist/scroll-frame-canvas.esm.js"}},"unpkg":"dist/scroll-frame-canvas.umd.js","jsdelivr":"dist/scroll-frame-canvas.umd.js","sideEffects":false,"scripts":{"build":"npm run clean && cross-env NODE_ENV=production webpack","docs:build":"npm run clean && cross-env NODE_ENV=production webpack --config webpack.dev.config.js","dev":"cross-env NODE_ENV=development webpack serve --config webpack.dev.config.js","clean":"rimraf dist","deploy":"gh-pages -d docs-dist","type-check":"tsc --noEmit","compile":"tsc"},"keywords":["scroll","canvas","frame","sequence","image-sequence","scroll-driven","animation","offscreen-canvas","progressive-loading"],"license":"MIT","devDependencies":{"@types/node":"^24.3.1","copy-webpack-plugin":"^12.0.2","cross-env":"^10.0.0","gh-pages":"^6.3.0","html-webpack-plugin":"^5.6.0","rimraf":"^5.0.7","ts-loader":"^9.5.4","typescript":"^5.9.2","webpack":"^5.93.0","webpack-cli":"^5.1.4","webpack-dev-server":"^5.0.4"},"_id":"@byte.n/scroll-frame-canvas@1.1.0","gitHead":"aef4d2f943e3180bd457a1a75db01bfb13cbec73","_nodeVersion":"20.18.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-89G59dLhMpx5DEb29mmp77yQKjTzLOmPbIHv197I3X9YtJPeHELW3YLKEIJ2ZkA5yOQdbq2wTcCCb+gnFemiQw==","shasum":"e8ffb304ed495ba0517706914a5a9a9796bcf383","tarball":"https://registry.npmjs.org/@byte.n/scroll-frame-canvas/-/scroll-frame-canvas-1.1.0.tgz","fileCount":2,"unpackedSize":4318,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHDkqn9Zt3Z1YFPILj0BoZppEj6WyF8Cl0ohzQwuDu/HAiEAmGMYw5QAnIBqBrVXO2dt8VhAKcVkMaALTiB/DCgCN4g="}]},"_npmUser":{"name":"byte.n","email":"dancingbytes@qq.com"},"directories":{},"maintainers":[{"name":"byte.n","email":"dancingbytes@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/scroll-frame-canvas_1.1.0_1757247182414_0.8583846657739789"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-07T10:26:12.940Z","modified":"2025-09-07T12:13:02.770Z","1.0.0":"2025-09-07T10:26:13.325Z","1.0.1":"2025-09-07T10:41:43.389Z","1.1.0":"2025-09-07T12:13:02.602Z"},"license":"MIT","keywords":["scroll","canvas","frame","sequence","image-sequence","scroll-driven","animation","offscreen-canvas","progressive-loading"],"description":"基于滚动条驱动的 Canvas 帧序列渲染器，支持渐进式大序列加载、OffscreenCanvas 预渲染与事件回调。","maintainers":[{"name":"byte.n","email":"dancingbytes@qq.com"}],"readme":"<div align=\"center\">\r\n\r\n[![npm version](https://img.shields.io/npm/v/%40byte.n%2Fscroll-frame-canvas.svg?style=flat&color=blue)](https://www.npmjs.com/package/@byte.n/scroll-frame-canvas)\r\n\r\n</div>\r\n\r\n## scroll-frame-canvas\r\n\r\n一个基于滚动条驱动的 Canvas 帧序列渲染器。支持超大序列的渐进式加载（分层预取）、OffscreenCanvas 预渲染、`contain/cover/fill` 缩放、滚动轴映射、自定义加载动画与事件回调，适用于产品页沉浸式滚动动画、分镜头切换与高分辨率影像浏览。\r\n\r\n### 功能特性\r\n- 渐进式加载：通过 `large.factor` 分层取样，先快后全，体验流畅\r\n- OffscreenCanvas 预渲染：将图片转换为 `ImageBitmap`，渲染更高效\r\n- 任意滚动轴：`x` 或 `y`，由 `frameMapper` 精确映射到帧索引\r\n- 多种缩放：`contain` / `cover` / `fill`\r\n- 事件系统：`frame`、`complete`、`initComplete`、`error`\r\n- 自定义加载动画：主加载与背景层加载均可自定义绘制\r\n- 并发控制与重试：`maxConcurrentLoads` \r\n\r\n文档 & Demo：https://byte-n.github.io/scroll-frame-canvas/\r\n\r\n---\r\n\r\n\r\n### 安装\r\n\r\n```bash\r\npnpm add @byte.n/scroll-frame-canvas\r\n# 或\r\nnpm i @byte.n/scroll-frame-canvas\r\n# 或\r\nyarn add @byte.n/scroll-frame-canvas\r\n```\r\n\r\n### 快速开始\r\n\r\n```ts\r\nimport ScrollFrameCanvas from '@byte.n/scroll-frame-canvas'\r\n\r\nconst canvas = document.querySelector('canvas')!\r\n\r\nconst sfc = new ScrollFrameCanvas({\r\n  canvasEle: canvas,\r\n  scrollbarEle: window,\r\n  scrollAxis: 'y',\r\n  // 传入完整数组，或使用 total + imageFactory\r\n  total: 281,\r\n  imageFactory: (index) => `/images/frame-${String(index + 1).padStart(3, '0')}.jpg`,\r\n  scaleMode: 'contain',\r\n  large: { enabled: true, factor: 16, showBackgroundProgress: true },\r\n  maxConcurrentLoads: 8,\r\n  frameMapper: (scrollPixels, totalScrollPixels, totalFrames) => {\r\n    const ratio = totalScrollPixels ? scrollPixels / totalScrollPixels : 0\r\n    return Math.round(ratio * (totalFrames - 1))\r\n  },\r\n  onInitComplete: () => console.log('初始化完成'),\r\n  onError: (e) => console.error(e),\r\n})\r\n\r\nawait sfc.init()\r\nsfc.play()\r\n```\r\n\r\n### 常见问题\r\n\r\n- 关于大序列：开启 `large.enabled` 后会分层取样，先加载关键帧，随后后台补齐，保证首屏可用与流畅度。\r\n- 关于 `frameMapper`：请根据页面可滚动距离与交互节奏自定义映射关系。\r\n- 跨域图像：从 URL 加载时设置了 `crossOrigin = 'anonymous'`，请确保 CDN 允许跨域。\r\n\r\n### 本地开发与示例\r\n\r\n```bash\r\npnpm i\r\npnpm dev\r\n# 打开 http://localhost:8080 查看 demo\r\n```\r\n\r\n\r\n### License\r\n\r\nMIT\r\n\r\n","readmeFilename":"README.md"}