debug: add detailed WASM loading diagnostics for ImageMagick
Added comprehensive logging to diagnose the WASM loading issue: - Log the WASM URL being fetched - Log fetch response (status, content-type, content-length) - Log actual WASM file size after fetching - Verify the buffer is not empty before initialization - Pass ArrayBuffer directly to initializeImageMagick - Better error messages with context This will help identify why the WASM file appears empty: - Is the fetch failing? (wrong path, 404, CORS) - Is the response empty? (server issue) - Is the content-type wrong? (misconfigured server) The logs will appear in the browser console when converting images. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -65,18 +65,47 @@ export async function loadImageMagick(): Promise<any> {
|
|||||||
// Initialize ImageMagick with WASM file from public directory
|
// Initialize ImageMagick with WASM file from public directory
|
||||||
// In production (static export), this will be served from /wasm/magick.wasm
|
// In production (static export), this will be served from /wasm/magick.wasm
|
||||||
const wasmUrl = '/wasm/magick.wasm';
|
const wasmUrl = '/wasm/magick.wasm';
|
||||||
await initializeImageMagick(wasmUrl);
|
|
||||||
|
console.log('[ImageMagick] Attempting to load WASM from:', wasmUrl);
|
||||||
|
|
||||||
|
// Test fetch the WASM file first to debug
|
||||||
|
try {
|
||||||
|
const response = await fetch(wasmUrl);
|
||||||
|
console.log('[ImageMagick] WASM fetch response:', {
|
||||||
|
ok: response.ok,
|
||||||
|
status: response.status,
|
||||||
|
contentType: response.headers.get('content-type'),
|
||||||
|
contentLength: response.headers.get('content-length'),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to fetch WASM file: ${response.status} ${response.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const arrayBuffer = await response.arrayBuffer();
|
||||||
|
console.log('[ImageMagick] WASM file size:', arrayBuffer.byteLength, 'bytes');
|
||||||
|
|
||||||
|
if (arrayBuffer.byteLength === 0) {
|
||||||
|
throw new Error('WASM file is empty');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Now initialize with the buffer directly
|
||||||
|
await initializeImageMagick(arrayBuffer);
|
||||||
|
} catch (fetchError) {
|
||||||
|
console.error('[ImageMagick] Failed to fetch WASM:', fetchError);
|
||||||
|
throw fetchError;
|
||||||
|
}
|
||||||
|
|
||||||
const ImageMagick = await import('@imagemagick/magick-wasm');
|
const ImageMagick = await import('@imagemagick/magick-wasm');
|
||||||
|
|
||||||
imagemagickInstance = ImageMagick;
|
imagemagickInstance = ImageMagick;
|
||||||
moduleState.imagemagick = true;
|
moduleState.imagemagick = true;
|
||||||
console.log('ImageMagick loaded and initialized successfully');
|
console.log('[ImageMagick] Loaded and initialized successfully');
|
||||||
|
|
||||||
return imagemagickInstance;
|
return imagemagickInstance;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to load ImageMagick:', error);
|
console.error('[ImageMagick] Failed to load:', error);
|
||||||
throw new Error('Failed to load ImageMagick WASM module');
|
throw new Error(`Failed to load ImageMagick WASM module: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user