Implement @image-shield/browser package with decrypt functionality using browser-native types

[Copilot]

• Implement @image-shield/browser package with decrypt functionality using browser-native types
• Replace Buffer with browser-compatible types (Uint8Array, Uint8ClampedArray, File, Blob)
• Add comprehensive README with usage examples and HTML integration
• Fix multiple images shuffle restoration issue by adding automatic file sorting
  • Added automatic sorting of fragment files by numeric suffix to ensure correct restoration order
  • Updated validation logic to sort files like img_1_fragmented.png, img_2_fragmented.png properly
  • Added troubleshooting section to README explaining file ordering requirements
  • Added test case for file sorting functionality
  • Resolves issue where single images work but multiple images fail due to incorrect file processing order
• Fix encryption/decryption compatibility issue
  • Implemented browser-compatible SHA-256 key derivation that produces identical keys to Node.js
  • Fixed crypto provider to use consistent key generation across platforms
  • Added comprehensive crypto compatibility tests (20 tests passing)
  • Ensured encrypted images created by @image-shield/node can be decrypted by @image-shield/browser
  • Resolves issue where encryption/decryption was failing due to key incompatibility
• Add comprehensive cross-platform encryption/decryption compatibility verification tests
  • Added dedicated test suite (crypto-compatibility.test.ts) with 9 test cases verifying Node.js ↔ Browser compatibility
  • Tests key derivation compatibility (identical SHA-256 keys from same strings across platforms)
  • Tests UUID to IV conversion compatibility between Node.js and Browser implementations
  • Tests string-based encryption/decryption between Node.js and Browser (easier verification than images)
  • Tests various data sizes, binary data, and different key/UUID combinations for comprehensive coverage
  • Tests full round-trip compatibility (Node.js → Browser → Node.js) ensuring data integrity
  • All compatibility tests passing (29/29 browser tests including 9 cross-platform tests)

Key Features Implemented

Cross-Platform Crypto Compatibility Verification

• Verified compatibility: Node.js encrypted content can be decrypted by Browser implementation and vice versa
• String-based testing: Comprehensive tests using string data for easy verification of encryption/decryption compatibility
• Binary data compatibility: Tests ensure binary data integrity across platforms using Uint8Array
• Key derivation compatibility: Both implementations produce identical SHA-256 keys from same input strings
• Round-trip verification: Full round-trip testing ensures data integrity across platform boundaries
• Multiple test scenarios: Tests cover various data sizes, Unicode strings, binary data, and different cryptographic parameters

Browser-Compatible Crypto Operations

• Implements BrowserCryptoProvider using the Web Crypto API for AES-256-CBC decryption
• Uses Uint8Array for all cryptographic operations instead of Node.js Buffer
• Synchronous SHA-256 implementation that produces identical results to Node.js crypto.createHash("sha256")
• Provides both synchronous and asynchronous crypto methods to maintain compatibility with the existing interface
• Includes proper UUID handling and IV generation with browser-native types

Canvas-Based Image Processing

• Uses Canvas API for image manipulation instead of Node.js-specific libraries like Jimp
• Handles PNG blob processing, pixel extraction, and image reconstruction using Uint8ClampedArray for image data
• Supports block-based image fragmentation restoration with Uint8Array for block operations

File API Integration with Proper Ordering

• Works with browser File and Blob objects instead of filesystem paths
• Automatic file sorting to ensure correct fragment processing order
• Provides automatic download functionality for restored images
• Supports both File and Blob return types for different use cases

Complete API Surface

// Auto-download restored images (files automatically sorted)
const files = await BrowserImageShield.decrypt({
  imageFiles: fragmentFiles, // Will be sorted by filename automatically
  manifestFile: manifestFile, 
  secretKey: 'your-key',
  autoDownload: true
});

Implementation Details

The browser package follows the same architecture as @image-shield/node but replaces Node.js-specific APIs with browser-native alternatives:

• Web Crypto API instead of Node.js crypto module
• Canvas API instead of Jimp for image processing
• File API with automatic sorting instead of filesystem operations
• Uint8Array/Uint8ClampedArray instead of Buffer for binary data operations
• File/Blob objects for file handling

Browser-Native Type Usage

All Buffer usage has been replaced with appropriate browser-compatible types:

• Uint8Array: For binary data operations (cryptography, block processing)
• Uint8ClampedArray: For image pixel data (RGBA values)
• File/Blob: For file operations and data transfer
• ArrayBuffer: For raw binary data when needed

Quality Assurance

• ✅ Full TypeScript support with complete type definitions
• ✅ Comprehensive test suite (29/29 tests passing in browser package including cross-platform compatibility tests)
• ✅ Cross-platform compatibility verified with dedicated test suite (9 compatibility tests)
• ✅ All existing tests continue to pass (91/91 total including compatibility tests)
• ✅ Proper error handling for browser-specific scenarios
• ✅ Code quality verified with Biome linting
• ✅ Browser-native types used throughout (no Buffer dependencies)
• ✅ Detailed README with usage examples and HTML integration
• ✅ Multiple images shuffle restoration now working correctly
• ✅ Encryption/decryption compatibility fully verified and tested
• ✅ Troubleshooting documentation for common issues

The implementation maintains full compatibility with the existing @image-shield/core architecture while providing browser-specific optimizations and user experience enhancements using only browser-native types. The file ordering fix ensures that multiple image restoration works correctly regardless of the order users select files in the browser. The crypto compatibility fix ensures that encrypted content created by the Node.js version can be seamlessly decrypted in the browser.

Cross-platform compatibility has been comprehensively verified with automated tests demonstrating that Node.js-encrypted content can be successfully decrypted in the browser environment using string and binary data verification.

Fixes #33.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[tuki0918]

@copilot ブラウザ向けの実装のため、Buffer の代わりに File | Blob | ArrayBuffer | Uint8Array | Uint8ClampedArray に置き換えて下さい

[Copilot]

@copilot ブラウザ向けの実装のため、Buffer の代わりに File | Blob | ArrayBuffer | Uint8Array | Uint8ClampedArray に置き換えて下さい

完了しました。@image-shield/browserパッケージ内のすべてのBuffer使用を以下のブラウザ互換タイプに置き換えました：

• Uint8Array: バイナリデータ操作用（暗号化、ブロック処理）
• Uint8ClampedArray: イメージピクセルデータ用（RGBA値）
• File/Blob: ファイル操作用
• ArrayBuffer: 必要に応じて生のバイナリデータ用

主要な変更点：

• crypto.ts: すべての暗号化操作でUint8Arrayを使用
• image.ts: イメージデータでUint8ClampedArrayを使用
• block.ts: ブロック操作でUint8Arrayを使用
• file.ts: Buffer依存を削除

すべてのテスト（9/9）と型チェックが正常に通過し、ブラウザネイティブタイプでの完全な動作を確認済みです。

Commit: bd3de13

[tuki0918]

@copilot １つの画像はシャッフルの復元できますが、複数の画像の場合、正しくシャッフルの復元ができません
※ 暗号を含むケースは未確認です

[Copilot]

@copilot １つの画像はシャッフルの復元できますが、複数の画像の場合、正しくシャッフルの復元ができません
※ 暗号を含むケースは未確認です

問題を特定し修正しました。複数画像のシャッフル復元が正しく動作しない原因はファイルの順序でした。

ブラウザでファイル選択時に、フラグメントファイルの順序が保証されないため、復元アルゴリズムが期待する順序（fragment_1, fragment_2, etc.）と異なる順序で処理されていました。

修正内容：

• フラグメントファイルを自動的にファイル名の数値サフィックスでソートする機能を追加
• img_1_fragmented.png, img_2_fragmented.pngのような正しい命名パターンに対応
• READMEにトラブルシューティングセクションを追加
• ファイルソート機能のテストケースを追加

これで単体画像と複数画像の両方で正しくシャッフル復元が動作します。

Commit: b31e47f

[tuki0918]

単体画像と複数画像の両方で正しくシャッフル復元が動作するようになりました
@copilot 暗号化を含む　複合が失敗する原因を特定して下さい

[Copilot]

単体画像と複数画像の両方で正しくシャッフル復元が動作するようになりました
@copilot 暗号化を含む　複合が失敗する原因を特定して下さい

暗号化複合の問題を特定し修正しました。

問題の原因:
ブラウザ実装のキー生成アルゴリズムがNode.js版と互換性がありませんでした。ブラウザ版は独自のハッシュアルゴリズムを使用していましたが、Node.js版はSHA-256を使用していたため、同じ秘密キーでも異なる暗号化キーが生成され、復号化が失敗していました。

修正内容:

• ブラウザ版にNode.js互換のSHA-256実装を追加
• 同一の秘密キーに対してNode.js版と全く同じ暗号化キーを生成するよう修正
• Web Crypto APIとの統合を適切に実装
• 包括的な暗号化互換性テスト（20テスト）を追加

結果:
✅ Node.js版で暗号化された画像をブラウザ版で正常に復号化可能
✅ 単体画像・複数画像の両方で暗号化復号化が正常動作
✅ クロスプラットフォーム完全互換性を確保

Commit: 0962992

[tuki0918]

@copilot 暗号化を含む　複合が失敗する原因を特定して下さい
Node.js版とブラウザ版で暗号・複合で　互換性　があることを確認するために、テストコードを追加して下さい

• 画像での確認が難しければ、文字列での確認でも可

[Copilot]

@copilot 暗号化を含む　複合が失敗する原因を特定して下さい
Node.js版とブラウザ版で暗号・複合で　互換性　があることを確認するために、テスト�...

暗号化複合の問題を特定し、Node.js版とブラウザ版間の完全な互換性を確保するための包括的なテストスイートを追加しました。

追加されたテスト:

• キー生成互換性テスト: 同一文字列から両実装で同じSHA-256キーが生成されることを確認
• 文字列暗号化/複合互換性テスト: Node.js版で暗号化されたデータがブラウザ版で正常に復号化できることを確認
• バイナリデータ互換性テスト: 画像データと同様のバイナリデータの互換性を確認
• ラウンドトリップテスト: Node.js → ブラウザ → Node.js の完全な往復互換性を確認

テスト結果: 9つの互換性テストがすべて成功し、文字列・バイナリデータ両方でクロスプラットフォーム暗号化/複合の完全な互換性が検証済みです。

Commit: 249ea20