@file-viewer/renderer-image 2.0.11

package/LICENSE

@@ -0,0 +1,160 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and
+distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright
+owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities
+that control, are controlled by, or are under common control with that entity.
+For the purposes of this definition, "control" means (i) the power, direct or
+indirect, to cause the direction or management of such entity, whether by
+contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
+outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising
+permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including
+but not limited to software source code, documentation source, and configuration
+files.
+
+"Object" form shall mean any form resulting from mechanical transformation or
+translation of a Source form, including but not limited to compiled object code,
+generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form,
+made available under the License, as indicated by a copyright notice that is
+included in or attached to the work.
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that
+is based on (or derived from) the Work and for which the editorial revisions,
+annotations, elaborations, or other modifications represent, as a whole, an
+original work of authorship. For the purposes of this License, Derivative Works
+shall not include works that remain separable from, or merely link (or bind by
+name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version
+of the Work and any modifications or additions to that Work or Derivative Works
+thereof, that is intentionally submitted to Licensor for inclusion in the Work by
+the copyright owner or by an individual or Legal Entity authorized to submit on
+behalf of the copyright owner. For the purposes of this definition, "submitted"
+means any form of electronic, verbal, or written communication sent to the
+Licensor or its representatives, including but not limited to communication on
+electronic mailing lists, source code control systems, and issue tracking systems
+that are managed by, or on behalf of, the Licensor for the purpose of discussing
+and improving the Work, but excluding communication that is conspicuously marked
+or otherwise designated in writing by the copyright owner as "Not a
+Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf
+of whom a Contribution has been received by Licensor and subsequently
+incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this
+License, each Contributor hereby grants to You a perpetual, worldwide,
+non-exclusive, no-charge, royalty-free, irrevocable copyright license to
+reproduce, prepare Derivative Works of, publicly display, publicly perform,
+sublicense, and distribute the Work and such Derivative Works in Source or
+Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License,
+each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
+no-charge, royalty-free, irrevocable (except as stated in this section) patent
+license to make, have made, use, offer to sell, sell, import, and otherwise
+transfer the Work, where such license applies only to those patent claims
+licensable by such Contributor that are necessarily infringed by their
+Contribution(s) alone or by combination of their Contribution(s) with the Work to
+which such Contribution(s) was submitted. If You institute patent litigation
+against any entity (including a cross-claim or counterclaim in a lawsuit)
+alleging that the Work or a Contribution incorporated within the Work
+constitutes direct or contributory patent infringement, then any patent licenses
+granted to You under this License for that Work shall terminate as of the date
+such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or
+Derivative Works thereof in any medium, with or without modifications, and in
+Source or Object form, provided that You meet the following conditions:
+
+(a) You must give any other recipients of the Work or Derivative Works a copy of
+this License; and
+
+(b) You must cause any modified files to carry prominent notices stating that
+You changed the files; and
+
+(c) You must retain, in the Source form of any Derivative Works that You
+distribute, all copyright, patent, trademark, and attribution notices from the
+Source form of the Work, excluding those notices that do not pertain to any part
+of the Derivative Works; and
+
+(d) If the Work includes a "NOTICE" text file as part of its distribution, then
+any Derivative Works that You distribute must include a readable copy of the
+attribution notices contained within such NOTICE file, excluding those notices
+that do not pertain to any part of the Derivative Works, in at least one of the
+following places: within a NOTICE text file distributed as part of the Derivative
+Works; within the Source form or documentation, if provided along with the
+Derivative Works; or, within a display generated by the Derivative Works, if and
+wherever such third-party notices normally appear. The contents of the NOTICE
+file are for informational purposes only and do not modify the License. You may
+add Your own attribution notices within Derivative Works that You distribute,
+alongside or as an addendum to the NOTICE text from the Work, provided that such
+additional attribution notices cannot be construed as modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide
+additional or different license terms and conditions for use, reproduction, or
+distribution of Your modifications, or for any such Derivative Works as a whole,
+provided Your use, reproduction, and distribution of the Work otherwise complies
+with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any
+Contribution intentionally submitted for inclusion in the Work by You to the
+Licensor shall be under the terms and conditions of this License, without any
+additional terms or conditions. Notwithstanding the above, nothing herein shall
+supersede or modify the terms of any separate license agreement you may have
+executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names,
+trademarks, service marks, or product names of the Licensor, except as required
+for reasonable and customary use in describing the origin of the Work and
+reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in
+writing, Licensor provides the Work (and each Contributor provides its
+Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied, including, without limitation, any warranties or
+conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+PARTICULAR PURPOSE. You are solely responsible for determining the
+appropriateness of using or redistributing the Work and assume any risks
+associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in
+tort (including negligence), contract, or otherwise, unless required by
+applicable law (such as deliberate and grossly negligent acts) or agreed to in
+writing, shall any Contributor be liable to You for damages, including any
+direct, indirect, special, incidental, or consequential damages of any character
+arising as a result of this License or out of the use or inability to use the
+Work (including but not limited to damages for loss of goodwill, work stoppage,
+computer failure or malfunction, or any and all other commercial damages or
+losses), even if such Contributor has been advised of the possibility of such
+damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or
+Derivative Works thereof, You may choose to offer, and charge a fee for,
+acceptance of support, warranty, indemnity, or other liability obligations and/or
+rights consistent with this License. However, in accepting such obligations, You
+may act only on Your own behalf and on Your sole responsibility, not on behalf of
+any other Contributor, and only if You agree to indemnify, defend, and hold each
+Contributor harmless for any liability incurred by, or claims asserted against,
+such Contributor by reason of your accepting any such warranty or additional
+liability.
+
+END OF TERMS AND CONDITIONS
+
+Copyright 2026 Flyfish Viewer

package/README.en.md

@@ -0,0 +1,35 @@
+# @file-viewer/renderer-image
+
+Standalone image renderer package for Flyfish File Viewer. It handles browser-side preview, lightbox viewing, and unified zoom for `png`, `jpg`, `webp`, `avif`, `gif`, `svg`, `tiff`, `ico`, `heic`, `heif`, `jxl`, and related image files.
+
+## Usage
+
+```ts
+import { imageRenderer } from '@file-viewer/renderer-image'
+
+const options = {
+  builtinRenderers: 'none',
+  renderers: [imageRenderer],
+}
+```
+
+Or compose it through the full preset:
+
+```ts
+import { allRenderers } from '@file-viewer/preset-all'
+
+const options = {
+  builtinRenderers: 'none',
+  renderers: allRenderers,
+}
+```
+
+## Features
+
+- Common image formats use native browser decoding without extra runtime work.
+- HEIC / HEIF dynamically imports `heic2any` only when those formats are opened.
+- Includes lightbox viewing, a unified zoom provider, theme-aware background, and unmount cleanup.
+
+## Migration Note
+
+`@file-viewer/core` still keeps lightweight native image preview for browser-supported PNG / JPEG / SVG / WebP formats, but it no longer installs `heic2any` by default. Install this package explicitly, or use `@file-viewer/preset-all`, when HEIC / HEIF conversion or the full standalone image renderer is required.

package/README.md

@@ -0,0 +1,35 @@
+# @file-viewer/renderer-image
+
+Flyfish File Viewer 的独立图片 renderer 包。它负责 `png`、`jpg`、`webp`、`avif`、`gif`、`svg`、`tiff`、`ico`、`heic`、`heif`、`jxl` 等图片类文件的浏览器端预览、灯箱查看和统一缩放。
+
+## 使用
+
+```ts
+import { imageRenderer } from '@file-viewer/renderer-image'
+
+const options = {
+  builtinRenderers: 'none',
+  renderers: [imageRenderer],
+}
+```
+
+也可以通过全量 preset 自动装配：
+
+```ts
+import { allRenderers } from '@file-viewer/preset-all'
+
+const options = {
+  builtinRenderers: 'none',
+  renderers: allRenderers,
+}
+```
+
+## 能力
+
+- 普通图片使用浏览器原生解码，不引入额外运行时。
+- HEIC / HEIF 只在命中格式时动态加载 `heic2any` 并转换为 PNG Data URL。
+- 支持图片灯箱、统一缩放 provider、明暗主题背景和组件卸载清理。
+
+## 迁移说明
+
+`@file-viewer/core` 仍保留 PNG / JPEG / SVG / WebP 等浏览器原生图片的轻量预览，但已不再默认安装 `heic2any`。需要 HEIC / HEIF 转换预览、或希望完全由独立图片 renderer 接管图片链路时，请显式安装本包，或直接使用 `@file-viewer/preset-all` 聚合能力。

package/dist/image.d.ts

@@ -0,0 +1,2 @@
+import { type FileViewerRenderedInstance } from '@file-viewer/core';
+export default function renderImage(buffer: ArrayBuffer, target: HTMLDivElement, type?: string): Promise<FileViewerRenderedInstance>;

package/dist/image.js

@@ -0,0 +1,178 @@
+import { createFileViewerZoomChangeEmitter as createZoomChangeEmitter, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
+const imageMimeMap = {
+    avif: 'image/avif',
+    bmp: 'image/bmp',
+    gif: 'image/gif',
+    heic: 'image/heic',
+    heif: 'image/heif',
+    ico: 'image/x-icon',
+    jxl: 'image/jxl',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    tif: 'image/tiff',
+    tiff: 'image/tiff',
+    webp: 'image/webp',
+};
+const imageStyle = `
+.image-viewer{position:relative;width:100%;height:100%;overflow:auto;background:#eef1f4;box-sizing:border-box}
+.image-stage{min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
+.image-stage img{display:block;width:auto;max-width:none;margin:0 auto;border:0;box-shadow:0 18px 48px rgba(15,23,42,.16);background:#fff;cursor:zoom-in}
+.image-lightbox{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(15,23,42,.88);box-sizing:border-box}
+.image-lightbox[hidden]{display:none}
+.image-lightbox img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.4);cursor:zoom-out}
+.image-lightbox button{position:absolute;top:20px;right:20px;width:40px;height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#172033;font-size:24px;line-height:40px;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.18)}
+.file-viewer[data-viewer-theme='dark'] .image-viewer{background:#101820}
+@media (prefers-color-scheme:dark){.file-viewer[data-viewer-theme='system'] .image-viewer{background:#101820}}
+@media (max-width:767px){.image-stage{padding:12px}.image-lightbox{padding:16px}.image-lightbox button{top:12px;right:12px}}
+`;
+const createStyle = () => {
+    const style = document.createElement('style');
+    style.textContent = imageStyle;
+    return style;
+};
+const getImageBlobType = (type) => {
+    const normalized = (type || '').trim().toLowerCase();
+    return imageMimeMap[normalized] || 'image/*';
+};
+const readBlobDataUrl = async (blob) => {
+    return await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = event => {
+            var _a;
+            const result = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+            if (typeof result === 'string') {
+                resolve(result);
+                return;
+            }
+            reject(new Error('Unable to read image data URL.'));
+        };
+        reader.onerror = () => reject(reader.error || new Error('Unable to read image data URL.'));
+        reader.readAsDataURL(blob);
+    });
+};
+const renderHeic = async (buffer, type) => {
+    const { default: heic2any } = await import('heic2any');
+    const result = await heic2any({
+        blob: new Blob([buffer], { type: getImageBlobType(type) }),
+        toType: 'image/png',
+    });
+    const blob = Array.isArray(result) ? result[0] : result;
+    return readBlobDataUrl(blob);
+};
+const resolveImageUrl = async (buffer, type) => {
+    const normalizedType = (type || '').trim().toLowerCase();
+    if (normalizedType === 'heic' || normalizedType === 'heif') {
+        return renderHeic(buffer, normalizedType);
+    }
+    return readBlobDataUrl(new Blob([buffer], { type: getImageBlobType(normalizedType) }));
+};
+const clampZoom = (value) => {
+    return Math.min(5, Math.max(0.1, Number(value.toFixed(2))));
+};
+const applyImageZoom = (image, viewportHeight, zoom) => {
+    if (viewportHeight > 0) {
+        image.style.height = `${Math.max(1, Math.round(viewportHeight * zoom))}px`;
+        return;
+    }
+    image.style.height = `${zoom * 100}%`;
+};
+const createLightbox = (src) => {
+    const lightbox = document.createElement('div');
+    lightbox.className = 'image-lightbox';
+    lightbox.hidden = true;
+    lightbox.setAttribute('role', 'dialog');
+    lightbox.setAttribute('aria-modal', 'true');
+    const image = document.createElement('img');
+    image.alt = 'Preview image';
+    image.src = src;
+    const closeButton = document.createElement('button');
+    closeButton.type = 'button';
+    closeButton.setAttribute('aria-label', 'Close image preview');
+    closeButton.textContent = 'x';
+    const close = () => {
+        lightbox.hidden = true;
+    };
+    closeButton.addEventListener('click', close);
+    image.addEventListener('click', close);
+    lightbox.addEventListener('click', event => {
+        if (event.target === lightbox) {
+            close();
+        }
+    });
+    lightbox.append(image, closeButton);
+    return {
+        element: lightbox,
+        open() {
+            lightbox.hidden = false;
+        },
+        destroy() {
+            closeButton.removeEventListener('click', close);
+            image.removeEventListener('click', close);
+            lightbox.remove();
+        },
+    };
+};
+export default async function renderImage(buffer, target, type) {
+    const src = await resolveImageUrl(buffer, type);
+    let zoom = 1;
+    let viewportHeight = 0;
+    const zoomEmitter = createZoomChangeEmitter();
+    const root = document.createElement('div');
+    root.className = 'image-viewer';
+    root.dataset.viewerZoomProvider = 'image';
+    const stage = document.createElement('div');
+    stage.className = 'image-stage';
+    const image = document.createElement('img');
+    image.alt = '图片';
+    image.src = src;
+    stage.append(image);
+    root.append(stage);
+    const lightbox = createLightbox(src);
+    const openLightbox = () => lightbox.open();
+    image.addEventListener('click', openLightbox);
+    document.body.append(lightbox.element);
+    const updateViewportSize = () => {
+        viewportHeight = root.clientHeight || 0;
+        applyImageZoom(image, viewportHeight, zoom);
+        zoomEmitter.emit();
+    };
+    const resizeObserver = new ResizeObserver(updateViewportSize);
+    resizeObserver.observe(root);
+    const getZoomState = () => ({
+        scale: zoom,
+        label: `${Math.round(zoom * 100)}%`,
+        canZoomIn: zoom < 5,
+        canZoomOut: zoom > 0.1,
+        canReset: zoom !== 1,
+        minScale: 0.1,
+        maxScale: 5,
+    });
+    const setZoom = (scale) => {
+        zoom = clampZoom(scale);
+        applyImageZoom(image, viewportHeight, zoom);
+        zoomEmitter.emit();
+        return getZoomState();
+    };
+    registerFileViewerZoomProvider(root, {
+        zoomIn: () => setZoom(zoom + 0.15),
+        zoomOut: () => setZoom(zoom - 0.15),
+        resetZoom: () => setZoom(1),
+        setZoom,
+        getState: getZoomState,
+        subscribe: zoomEmitter.subscribe,
+    });
+    target.replaceChildren(createStyle(), root);
+    updateViewportSize();
+    return {
+        $el: target,
+        unmount() {
+            unregisterFileViewerZoomProvider(root);
+            resizeObserver.disconnect();
+            image.removeEventListener('click', openLightbox);
+            lightbox.destroy();
+            target.replaceChildren();
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { type FileRenderHandler, type FileViewerRenderedInstance, type FileViewerRendererPlugin, type RendererDefinition } from '@file-viewer/core';
+export declare const imageRendererDefinition: RendererDefinition;
+export declare const renderFileViewerImage: FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>;
+export declare const imageRenderer: FileViewerRendererPlugin<FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>>;
+export default imageRenderer;

package/dist/index.js

@@ -0,0 +1,17 @@
+import { DEFAULT_RENDERER_DEFINITIONS, } from '@file-viewer/core';
+const imageDefinition = DEFAULT_RENDERER_DEFINITIONS.find(definition => definition.id === 'image');
+if (!imageDefinition) {
+    throw new Error('@file-viewer/renderer-image could not locate the core image renderer definition.');
+}
+export const imageRendererDefinition = imageDefinition;
+export const renderFileViewerImage = (buffer, target, type) => import('./image.js').then(({ default: renderImage }) => renderImage(buffer, target, type));
+export const imageRenderer = {
+    id: 'file-viewer-renderer-image',
+    label: 'Flyfish File Viewer image renderer',
+    definitions: [imageRendererDefinition],
+    handlers: [{
+            rendererId: imageRendererDefinition.id,
+            handler: renderFileViewerImage,
+        }],
+};
+export default imageRenderer;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@file-viewer/renderer-image",
+  "version": "2.0.11",
+  "private": false,
+  "type": "module",
+  "description": "Standalone image renderer plugin for Flyfish File Viewer with native image preview, HEIC/HEIF conversion, lightbox, and unified zoom support.",
+  "keywords": [
+    "file-viewer",
+    "renderer",
+    "image",
+    "heic",
+    "heif",
+    "document-preview",
+    "document-viewer",
+    "file-preview",
+    "self-hosted"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": {
+    "name": "Wangyu",
+    "email": "wybaby168@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flyfish-dev/file-viewer-renderer-image.git",
+    "directory": "packages/renderers/image"
+  },
+  "homepage": "https://doc.file-viewer.app/guide/on-demand-renderers",
+  "bugs": {
+    "url": "https://github.com/flyfish-dev/file-viewer-renderer-image/issues"
+  },
+  "funding": {
+    "type": "individual",
+    "url": "https://dev.flyfish.group/shop"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "README.en.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@file-viewer/core": "^2.0.11",
+    "heic2any": "^0.0.4"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "tsc -b tsconfig.json",
+    "type-check": "tsc -b tsconfig.json"
+  }
+}