|
| 1 | +/** |
| 2 | + * Node.js Browser API Polyfills for Media Processing Demos |
| 3 | + * |
| 4 | + * This module provides polyfills for browser APIs that are required |
| 5 | + * for media processing to work in Node.js environment. |
| 6 | + * |
| 7 | + * Usage: |
| 8 | + * ```javascript |
| 9 | + * import './node-polyfills.js'; |
| 10 | + * ``` |
| 11 | + * |
| 12 | + * Polyfills included: |
| 13 | + * - Image constructor |
| 14 | + * - document.createElement (Canvas) |
| 15 | + * - URL.createObjectURL / revokeObjectURL |
| 16 | + * - Canvas 2D context with getImageData |
| 17 | + */ |
| 18 | + |
| 19 | +import { URL as NodeURL } from 'url'; |
| 20 | + |
| 21 | +// Track last created blob for mock URL handling |
| 22 | +let lastCreatedBlob = null; |
| 23 | + |
| 24 | +/** |
| 25 | + * Parse image dimensions from image data (basic format detection) |
| 26 | + * This is a simplified parser that works for common formats |
| 27 | + */ |
| 28 | +function parseImageDimensions(data) { |
| 29 | + const view = new DataView(data); |
| 30 | + |
| 31 | + try { |
| 32 | + // PNG: Check signature and read IHDR chunk |
| 33 | + if (data.byteLength >= 24 && |
| 34 | + view.getUint8(0) === 0x89 && view.getUint8(1) === 0x50 && |
| 35 | + view.getUint8(2) === 0x4E && view.getUint8(3) === 0x47) { |
| 36 | + // PNG IHDR is at offset 16 |
| 37 | + const width = view.getUint32(16); |
| 38 | + const height = view.getUint32(20); |
| 39 | + return { width, height }; |
| 40 | + } |
| 41 | + |
| 42 | + // JPEG: Scan for SOF (Start of Frame) markers |
| 43 | + if (data.byteLength >= 2 && |
| 44 | + view.getUint8(0) === 0xFF && view.getUint8(1) === 0xD8) { |
| 45 | + let offset = 2; |
| 46 | + while (offset < data.byteLength - 9) { |
| 47 | + if (view.getUint8(offset) === 0xFF) { |
| 48 | + const marker = view.getUint8(offset + 1); |
| 49 | + // SOF0 (0xC0) or SOF2 (0xC2) markers contain dimensions |
| 50 | + if (marker === 0xC0 || marker === 0xC2) { |
| 51 | + const height = view.getUint16(offset + 5); |
| 52 | + const width = view.getUint16(offset + 7); |
| 53 | + return { width, height }; |
| 54 | + } |
| 55 | + // Skip to next marker |
| 56 | + const length = view.getUint16(offset + 2); |
| 57 | + offset += length + 2; |
| 58 | + } else { |
| 59 | + offset++; |
| 60 | + } |
| 61 | + } |
| 62 | + } |
| 63 | + |
| 64 | + // GIF: dimensions at offset 6-9 |
| 65 | + if (data.byteLength >= 10 && |
| 66 | + view.getUint8(0) === 0x47 && view.getUint8(1) === 0x49 && |
| 67 | + view.getUint8(2) === 0x46) { |
| 68 | + const width = view.getUint16(6, true); // little-endian |
| 69 | + const height = view.getUint16(8, true); |
| 70 | + return { width, height }; |
| 71 | + } |
| 72 | + |
| 73 | + // WebP: RIFF format |
| 74 | + if (data.byteLength >= 30 && |
| 75 | + view.getUint8(0) === 0x52 && view.getUint8(1) === 0x49 && |
| 76 | + view.getUint8(2) === 0x46 && view.getUint8(3) === 0x46 && |
| 77 | + view.getUint8(8) === 0x57 && view.getUint8(9) === 0x45 && |
| 78 | + view.getUint8(10) === 0x42 && view.getUint8(11) === 0x50) { |
| 79 | + // VP8/VP8L/VP8X formats have different structures |
| 80 | + const fourCC = String.fromCharCode( |
| 81 | + view.getUint8(12), view.getUint8(13), |
| 82 | + view.getUint8(14), view.getUint8(15) |
| 83 | + ); |
| 84 | + if (fourCC === 'VP8 ' && data.byteLength >= 30) { |
| 85 | + const width = view.getUint16(26, true) & 0x3FFF; |
| 86 | + const height = view.getUint16(28, true) & 0x3FFF; |
| 87 | + return { width, height }; |
| 88 | + } else if (fourCC === 'VP8L' && data.byteLength >= 25) { |
| 89 | + const bits = view.getUint32(21, true); |
| 90 | + const width = (bits & 0x3FFF) + 1; |
| 91 | + const height = ((bits >> 14) & 0x3FFF) + 1; |
| 92 | + return { width, height }; |
| 93 | + } |
| 94 | + } |
| 95 | + |
| 96 | + // BMP: dimensions at offset 18-21 (little-endian) |
| 97 | + if (data.byteLength >= 26 && |
| 98 | + view.getUint8(0) === 0x42 && view.getUint8(1) === 0x4D) { |
| 99 | + const width = view.getUint32(18, true); |
| 100 | + const height = Math.abs(view.getInt32(22, true)); // can be negative |
| 101 | + return { width, height }; |
| 102 | + } |
| 103 | + } catch (e) { |
| 104 | + // Parsing failed, return default |
| 105 | + } |
| 106 | + |
| 107 | + // Default fallback dimensions |
| 108 | + return { width: 800, height: 600 }; |
| 109 | +} |
| 110 | + |
| 111 | +/** |
| 112 | + * Mock Image constructor for Node.js |
| 113 | + * Simulates browser Image loading behavior |
| 114 | + * Attempts to parse real dimensions from image data |
| 115 | + */ |
| 116 | +if (typeof global.Image === 'undefined') { |
| 117 | + global.Image = class Image { |
| 118 | + constructor() { |
| 119 | + this._src = ''; |
| 120 | + this.onload = null; |
| 121 | + this.onerror = null; |
| 122 | + this.width = 800; |
| 123 | + this.height = 600; |
| 124 | + this._loadPromise = null; |
| 125 | + } |
| 126 | + |
| 127 | + get src() { |
| 128 | + return this._src; |
| 129 | + } |
| 130 | + |
| 131 | + set src(value) { |
| 132 | + this._src = value; |
| 133 | + |
| 134 | + // Start async loading when src is set |
| 135 | + this._loadPromise = (async () => { |
| 136 | + if (this._src === 'blob:mock-url' && lastCreatedBlob) { |
| 137 | + // Fail for very small blobs (likely corrupt) |
| 138 | + if (lastCreatedBlob.size < 10) { |
| 139 | + setTimeout(() => { |
| 140 | + if (this.onerror) this.onerror(); |
| 141 | + }, 0); |
| 142 | + return; |
| 143 | + } |
| 144 | + |
| 145 | + // Try to parse real dimensions from the blob |
| 146 | + try { |
| 147 | + const arrayBuffer = await lastCreatedBlob.arrayBuffer(); |
| 148 | + const dimensions = parseImageDimensions(arrayBuffer); |
| 149 | + this.width = dimensions.width; |
| 150 | + this.height = dimensions.height; |
| 151 | + } catch (e) { |
| 152 | + // Keep default dimensions if parsing fails |
| 153 | + } |
| 154 | + } |
| 155 | + |
| 156 | + // Fire onload after dimensions are set |
| 157 | + setTimeout(() => { |
| 158 | + if (this.onload) this.onload(); |
| 159 | + }, 0); |
| 160 | + })(); |
| 161 | + } |
| 162 | + }; |
| 163 | +} |
| 164 | + |
| 165 | +/** |
| 166 | + * Mock URL.createObjectURL and revokeObjectURL |
| 167 | + * Override Node.js native implementation to track blobs for dimension parsing |
| 168 | + */ |
| 169 | +if (typeof URL !== 'undefined') { |
| 170 | + const originalCreateObjectURL = URL.createObjectURL; |
| 171 | + const originalRevokeObjectURL = URL.revokeObjectURL; |
| 172 | + |
| 173 | + URL.createObjectURL = (blob) => { |
| 174 | + lastCreatedBlob = blob; |
| 175 | + return 'blob:mock-url'; |
| 176 | + }; |
| 177 | + |
| 178 | + URL.revokeObjectURL = (url) => { |
| 179 | + lastCreatedBlob = null; |
| 180 | + }; |
| 181 | +} |
| 182 | + |
| 183 | +// Also set on global if not already there |
| 184 | +if (typeof global.URL === 'undefined') { |
| 185 | + global.URL = URL; |
| 186 | +} |
| 187 | + |
| 188 | +/** |
| 189 | + * Mock document.createElement for Canvas |
| 190 | + * Provides minimal Canvas API implementation |
| 191 | + */ |
| 192 | +if (typeof global.document === 'undefined') { |
| 193 | + global.document = { |
| 194 | + createElement: (tag) => { |
| 195 | + if (tag === 'canvas') { |
| 196 | + const canvas = { |
| 197 | + _width: 0, |
| 198 | + _height: 0, |
| 199 | + get width() { return this._width; }, |
| 200 | + set width(val) { this._width = val; }, |
| 201 | + get height() { return this._height; }, |
| 202 | + set height(val) { this._height = val; }, |
| 203 | + getContext: (type) => { |
| 204 | + if (type === '2d') { |
| 205 | + return { |
| 206 | + imageSmoothingEnabled: true, |
| 207 | + imageSmoothingQuality: 'high', |
| 208 | + fillStyle: '', |
| 209 | + drawImage: () => {}, |
| 210 | + fillRect: () => {}, |
| 211 | + /** |
| 212 | + * Mock getImageData - returns pixel data for color extraction |
| 213 | + * Creates a gradient pattern for realistic color analysis |
| 214 | + */ |
| 215 | + getImageData: (x, y, w, h) => { |
| 216 | + const pixelCount = w * h; |
| 217 | + const data = new Uint8ClampedArray(pixelCount * 4); |
| 218 | + |
| 219 | + // Generate gradient pixel data for color extraction testing |
| 220 | + // This creates a red-dominant gradient from red to dark red |
| 221 | + for (let i = 0; i < pixelCount; i++) { |
| 222 | + const offset = i * 4; |
| 223 | + const position = i / pixelCount; |
| 224 | + |
| 225 | + // Red channel: 255 -> 128 (dominant) |
| 226 | + data[offset] = Math.floor(255 - (position * 127)); |
| 227 | + // Green channel: 50 -> 30 (minimal) |
| 228 | + data[offset + 1] = Math.floor(50 - (position * 20)); |
| 229 | + // Blue channel: 50 -> 30 (minimal) |
| 230 | + data[offset + 2] = Math.floor(50 - (position * 20)); |
| 231 | + // Alpha channel: fully opaque |
| 232 | + data[offset + 3] = 255; |
| 233 | + } |
| 234 | + |
| 235 | + return { |
| 236 | + width: w, |
| 237 | + height: h, |
| 238 | + data |
| 239 | + }; |
| 240 | + }, |
| 241 | + putImageData: () => {}, |
| 242 | + createImageData: (w, h) => ({ |
| 243 | + width: w, |
| 244 | + height: h, |
| 245 | + data: new Uint8ClampedArray(w * h * 4) |
| 246 | + }), |
| 247 | + clearRect: () => {}, |
| 248 | + save: () => {}, |
| 249 | + restore: () => {}, |
| 250 | + translate: () => {}, |
| 251 | + rotate: () => {}, |
| 252 | + scale: () => {} |
| 253 | + }; |
| 254 | + } |
| 255 | + return null; |
| 256 | + }, |
| 257 | + toDataURL: (type = 'image/png', quality = 0.92) => { |
| 258 | + // Return a minimal data URL |
| 259 | + return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='; |
| 260 | + }, |
| 261 | + toBlob: (callback, type = 'image/png', quality = 0.92) => { |
| 262 | + // Simulate async blob creation |
| 263 | + setTimeout(() => { |
| 264 | + const blob = new Blob([new Uint8Array(100)], { type }); |
| 265 | + callback(blob); |
| 266 | + }, 0); |
| 267 | + } |
| 268 | + }; |
| 269 | + return canvas; |
| 270 | + } |
| 271 | + return null; |
| 272 | + } |
| 273 | + }; |
| 274 | +} |
| 275 | + |
| 276 | +console.log('✅ Node.js browser API polyfills loaded'); |
0 commit comments