Skip to content

securecat/heic-etc-viewer

Repository files navigation

HEIC etc Viewer

A single-file local image/video viewer and converter with HEIC, PDF, and ICO support — built for browsing and converting iPhone photo exports.

Overview

HEIC etc Viewer is a single HTML file that runs entirely in your browser. No data is sent to any server — all file processing happens locally between your browser and your local storage. This means it works equally well whether hosted on the web or run locally. Supports HEIC/HEIF, JPEG, PNG, WebP, GIF, AVIF, SVG, BMP, TIFF, MP4, WebM, MOV, PDF, and ICO. Folder navigation is provided via a tree panel. Key features include thumbnail caching, a lightbox viewer with drag-to-select zoom, checkerboard background for transparent images, video loop, and slideshow mode. Static images (HEIC/HEIF, JPEG, PNG, WebP, BMP, TIFF, AVIF) can also be converted and saved as WebP, PNG, JPEG, or PDF — one file at a time, or in bulk as a zip.

Tech Stack

Built as a single HTML file with no build tools or package dependencies.

  • Vanilla HTML / CSS / JavaScript — no frameworks
  • libheif.js — HEIC/HEIF decoding via WebAssembly, loaded from CDN
  • PDF.js — PDF thumbnail rendering via WebAssembly, loaded from CDN
  • jsPDF — PDF generation for the convert-to-PDF feature, loaded from CDN
  • client-zip — zip generation for bulk conversion downloads, loaded from CDN
  • Canvas API — thumbnail generation for video frames and zoom region rendering, and image re-encoding for the convert feature
  • File System API (webkitdirectory, DataTransferItem.webkitGetAsEntry) — local folder access and directory tree traversal

Installation

The easiest way is to open the hosted version on GitHub Pages:

https://securecat.github.io/heic-etc-viewer/

Your files never leave your device.

Alternatively, download heic-etc-viewer.html and open it directly in Chrome.

Note for local use

Opening via file:// disables folder drag & drop due to browser security restrictions. To enable it, run a local server in the same folder:

npx serve .
# or
python -m http.server 8080

Then open http://localhost:3000/heic-etc-viewer.html in Chrome.

Changelog

[3.4.1] - 2026-07-08

Changed

  • Video thumbnail generation (gallery grid and the "Thumbnail"/"Thumbnails" conversion) now tries a few points through the video instead of only the 10%-mark, skipping ones that look like a near-solid-color frame (fade-in/out, intro card) when a more detailed frame is available
  • The "Thumbnail"/"Thumbnails" download now reuses the frame already captured for the gallery grid instead of re-decoding the video from scratch
  • Hovering the selected folder in the tree now shows a distinct color (#8AB2FF text on #1B375E background) instead of the same color as a non-selected row
  • The "Open Folder" button's hover background is now #2D4EC1, also applied while pressed (previously identical to its resting color, so hovering had no visible effect)

Fixed

  • Switching from a folder scrolled partway down to another folder with enough files to scroll no longer starts the new gallery at the previous scroll position; it now always starts at the top (grid layout only scrolled back to top on a resize-triggered relayout, never on an actual folder switch)

See CHANGELOG.md for full history.


HEIC etc Viewer(HEICなどビューワー)

HEIC、PDF、ICOに対応した、単一ファイルで動作するローカル画像・動画ビューアー&コンバーター。iPhoneから書き出した写真の閲覧・変換に最適化されています。

概要

「HEIC etc Viewer」は、ブラウザ上で完全に動作する単一のHTMLファイルです。データがサーバーに送信されることはなく、すべてのファイル処理はブラウザとローカルストレージの間で完結します。そのため、Web上でホストする場合でもローカルで実行する場合でも、同様に利用可能です。 対応形式は、HEIC/HEIF、JPEG、PNG、WebP、GIF、AVIF、SVG、BMP、TIFF、MP4、WebM、MOV、PDF、ICOです。フォルダの移動は、ツリーパネルで行えます。主な機能として、サムネイルのキャッシュ、ドラッグ操作でズーム範囲を選択できるライトボックスビューア、透過画像用の市松模様の背景表示、動画のループ再生、スライドショーモードなどを備えています。静止画(HEIC/HEIF、JPEG、PNG、WebP、BMP、TIFF、AVIF)はWebP・PNG・JPEG・PDFに変換して保存することもでき、1ファイルずつでも、まとめてzipでも保存できます。

技術スタック

ビルドツールやパッケージの依存関係を使用せず、単一のHTMLファイルとして構築されています。

  • Vanilla HTML / CSS / JavaScript — フレームワーク不使用
  • libheif.js — WebAssemblyによるHEIC/HEIFデコード(CDNから読み込み)
  • PDF.js — WebAssemblyによるPDFサムネイルのレンダリング(CDNから読み込み)
  • jsPDF — PDF変換保存機能のPDF生成(CDNから読み込み)
  • client-zip — 一括変換ダウンロード時のzip生成(CDNから読み込み)
  • Canvas API — 動画フレームのサムネイル生成・ズーム領域のレンダリング・変換機能での画像再エンコード
  • File System API (webkitdirectory, DataTransferItem.webkitGetAsEntry) — ローカルフォルダへのアクセスおよびディレクトリツリーの走査

インストール

最も簡単な方法は、GitHub Pagesでホストされているバージョンを開くことです:

https://securecat.github.io/heic-etc-viewer/

サーバーへデータが送信されることはありません。ファイルの処理はすべて、ブラウザとローカルストレージの間でローカルに行われます。

あるいは、heic-etc-viewer.html をダウンロードし、Chrome で直接開いてください。

ローカル環境で使用する際の注意点

file:// 経由で開くと、ブラウザのセキュリティ制限により、フォルダのドラッグ&ドロップが無効になります。これを有効にするには、同じフォルダ内でローカルサーバーを起動してください:

npx serve .
# または
python -m http.server 8080

ローカルサーバー起動後、Chromeで http://localhost:3000/heic-etc-viewer.html を開きます。

更新履歴

[3.4.1] - 2026-07-08

変更

  • 動画のサムネイル生成(ギャラリー一覧・「Thumbnail」/「Thumbnails」変換の両方)を、再生時間10%地点だけでなく数地点を試すように変更。より内容の分かる地点があれば、ほぼ単色(フェードイン/アウト、イントロ画面など)のフレームを避けて選ぶ
  • 「Thumbnail」/「Thumbnails」のダウンロードは、ギャラリー表示用に生成済みのフレームを再利用するように変更(動画の再デコードなし)
  • ツリーで選択済みのフォルダにカーソルを重ねた時の色を、非選択行と同じ色ではなく専用の配色(背景#1B375E、文字#8AB2FF)に変更
  • 「Open Folder」ボタンのhover時の背景色を#2D4EC1に変更。押下時も同色を維持(これまでは通常時と同じ色でhoverしても見た目の変化がなかった)

修正

  • スクロールした状態のフォルダから、スクロールが発生するほど内容の多い別のフォルダへ移動した際、新しいギャラリーが前のフォルダのスクロール位置のまま表示されてしまう問題を修正。常に先頭から表示されるように(グリッドレイアウトでは、リサイズ時の再レイアウトでしか先頭に戻しておらず、フォルダ切り替え時には戻していなかった)

全履歴は CHANGELOG.md を参照。

About

A single-file local image/video viewer and converter with HEIC, PDF, and ICO support — built for browsing and converting iPhone photo exports.

Resources

License

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages