Spaces:
Running
Running
| // ========================================== | |
| // OmniConvert: Image Processing Module | |
| // ========================================== | |
| const ImageHub = { | |
| // Module State | |
| files: [], // Array of { id, file, name, srcUrl, srcSize, srcDims, status, out: {blob, url, size, name, fmt, dims}, error } | |
| nextId: 1, | |
| // Options (bound to UI controls) | |
| options: { | |
| targetFormat: 'png', // png, jpeg, webp, avif, bmp, ico, pdf | |
| targetSizeLimit: false, // binary search compression to KB | |
| targetSizeValue: 100, // in KB | |
| quality: 0.85, // 0.1 to 1.0 (lossy formats only) | |
| maxDimension: 0, // 0 for original, or max side length in px | |
| bgWhite: true, // fill transparency with white for jpg/bmp | |
| autoDownload: false // immediately trigger individual download | |
| }, | |
| // Initialize event bindings and drag-n-drop | |
| init() { | |
| this.bindEvents(); | |
| // Setup dropzone using app shell helper | |
| App.setupDropzone('imageDropzone', 'imageFileInput', (fileList) => { | |
| this.handleFilesAdded(fileList); | |
| }); | |
| }, | |
| // Bind controls to State | |
| bindEvents() { | |
| const $ = (id) => document.getElementById(id); | |
| // Target format selection | |
| const fmtButtons = document.querySelectorAll('#targetFormatGrid .fmt-btn'); | |
| fmtButtons.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| fmtButtons.forEach(b => b.classList.remove('active')); | |
| btn.classList.add('active'); | |
| this.options.targetFormat = btn.dataset.fmt; | |
| this.updateControlVisibility(); | |
| }); | |
| }); | |
| // Target size toggle | |
| $('targetSizeToggle').addEventListener('change', (e) => { | |
| this.options.targetSizeLimit = e.target.checked; | |
| this.updateControlVisibility(); | |
| }); | |
| // Target size input | |
| $('targetSizeKBInput').addEventListener('input', (e) => { | |
| let val = parseInt(e.target.value, 10); | |
| if (isNaN(val) || val < 5) val = 5; | |
| this.options.targetSizeValue = val; | |
| }); | |
| // Quality slider | |
| const qSlider = $('qualitySlider'); | |
| const qDisplay = $('qualityValDisplay'); | |
| qSlider.addEventListener('input', (e) => { | |
| const pct = e.target.value; | |
| qDisplay.textContent = pct + '%'; | |
| this.options.quality = parseInt(pct, 10) / 100; | |
| }); | |
| // Max side slider | |
| const sSlider = $('maxSizeSlider'); | |
| const sDisplay = $('maxSizeValDisplay'); | |
| sSlider.addEventListener('input', (e) => { | |
| const val = parseInt(e.target.value, 10); | |
| sDisplay.textContent = val === 0 ? 'Исходный' : val + 'px'; | |
| this.options.maxDimension = val; | |
| }); | |
| // Other settings | |
| $('bgWhiteToggle').addEventListener('change', (e) => this.options.bgWhite = e.target.checked); | |
| $('autoDownloadToggle').addEventListener('change', (e) => this.options.autoDownload = e.target.checked); | |
| // Queue buttons | |
| $('clearAllImagesBtn').addEventListener('click', () => this.clearQueue()); | |
| $('processAllImagesBtn').addEventListener('click', () => this.processAll()); | |
| $('downloadZipBtn').addEventListener('click', () => this.downloadAllAsZip()); | |
| }, | |
| // Toggle visible sliders based on active options | |
| updateControlVisibility() { | |
| const qualityCtrl = document.getElementById('qualityControl'); | |
| const targetCtrl = document.getElementById('targetSizeControl'); | |
| // Lossy formats support quality slider | |
| const isLossy = ['jpeg', 'webp', 'avif', 'pdf'].includes(this.options.targetFormat); | |
| // Quality slider is shown if lossy and target size is NOT enabled | |
| if (isLossy && !this.options.targetSizeLimit) { | |
| qualityCtrl.classList.remove('hidden'); | |
| } else { | |
| qualityCtrl.classList.add('hidden'); | |
| } | |
| // Target size input is shown only if target size option is toggled | |
| if (this.options.targetSizeLimit) { | |
| targetCtrl.classList.remove('hidden'); | |
| } else { | |
| targetCtrl.classList.add('hidden'); | |
| } | |
| }, | |
| // Handle files input selection or drop | |
| async handleFilesAdded(fileList) { | |
| let imagesCount = 0; | |
| const filesToProcess = Array.from(fileList); | |
| for (const file of filesToProcess) { | |
| const ext = file.name.split('.').pop().toLowerCase(); | |
| if (ext === 'pdf') { | |
| try { | |
| App.showToast(`Обработка PDF "${file.name}"...`, 'info'); | |
| const pages = await this.extractPagesFromPDF(file); | |
| for (const pageFile of pages) { | |
| this.addSingleFileToQueue(pageFile); | |
| imagesCount++; | |
| } | |
| } catch (err) { | |
| console.error(err); | |
| App.showToast(`Ошибка разбора PDF "${file.name}": ${err.message}`, 'error'); | |
| } | |
| } else { | |
| const isImg = file.type.startsWith('image/') || | |
| ['heic', 'heif', 'tiff', 'tif', 'avif', 'ico', 'bmp', 'svg'].includes(ext); | |
| if (!isImg) { | |
| App.showToast(`Файл "${file.name}" не является поддерживаемым изображением.`, 'warning'); | |
| continue; | |
| } | |
| this.addSingleFileToQueue(file); | |
| imagesCount++; | |
| } | |
| } | |
| if (imagesCount > 0) { | |
| App.showToast(`Добавлено файлов: ${imagesCount}`, 'info'); | |
| document.getElementById('imageQueueCard').classList.remove('hidden'); | |
| this.renderQueue(); | |
| } | |
| }, | |
| addSingleFileToQueue(file) { | |
| const id = this.nextId++; | |
| const srcUrl = URL.createObjectURL(file); | |
| this.files.push({ | |
| id, | |
| file, | |
| name: file.name, | |
| srcUrl, | |
| srcSize: file.size, | |
| srcDims: null, | |
| status: 'pending', | |
| out: null, | |
| error: null | |
| }); | |
| }, | |
| // Parse PDF and render pages as PNG image files offline | |
| async extractPagesFromPDF(file) { | |
| const pdfjsLib = window.pdfjsLib || window['pdfjs-dist/build/pdf']; | |
| if (!pdfjsLib) { | |
| throw new Error('Библиотека PDF.js не загружена. Проверьте lib/pdf.min.js'); | |
| } | |
| pdfjsLib.GlobalWorkerOptions.workerSrc = 'lib/pdf.worker.min.js'; | |
| const arrayBuffer = await file.arrayBuffer(); | |
| const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise; | |
| const numPages = pdf.numPages; | |
| App.showToast(`Извлечение страниц из PDF: ${numPages}...`, 'info'); | |
| const pagesList = []; | |
| const baseName = file.name.replace(/\.[^.]+$/, ''); | |
| for (let pageNum = 1; pageNum <= numPages; pageNum++) { | |
| const page = await pdf.getPage(pageNum); | |
| // Render at double scale to ensure good image quality/readability | |
| const scale = 2.0; | |
| const viewport = page.getViewport({ scale }); | |
| const canvas = document.createElement('canvas'); | |
| canvas.width = viewport.width; | |
| canvas.height = viewport.height; | |
| const ctx = canvas.getContext('2d'); | |
| await page.render({ | |
| canvasContext: ctx, | |
| viewport: viewport | |
| }).promise; | |
| const blob = await new Promise((resolve) => { | |
| canvas.toBlob((b) => resolve(b), 'image/png'); | |
| }); | |
| const pageFile = new File([blob], `${baseName}_page_${pageNum}.png`, { type: 'image/png' }); | |
| pagesList.push(pageFile); | |
| } | |
| return pagesList; | |
| }, | |
| // Clear everything in state | |
| clearQueue() { | |
| this.files.forEach(f => { | |
| if (f.srcUrl) URL.revokeObjectURL(f.srcUrl); | |
| if (f.out?.url) URL.revokeObjectURL(f.out.url); | |
| }); | |
| this.files = []; | |
| document.getElementById('imageQueueCard').classList.add('hidden'); | |
| document.getElementById('bulkDownloadBar').classList.add('hidden'); | |
| this.renderQueue(); | |
| App.showToast('Очередь очищена', 'info'); | |
| }, | |
| // Render HTML queue cards | |
| renderQueue() { | |
| const container = document.getElementById('imagesListContainer'); | |
| const queueCount = document.getElementById('queueCount'); | |
| container.innerHTML = ''; | |
| queueCount.textContent = this.files.length; | |
| if (this.files.length === 0) { | |
| return; | |
| } | |
| this.files.forEach(f => { | |
| const card = document.createElement('div'); | |
| card.className = 'file-card'; | |
| card.id = `img-card-${f.id}`; | |
| // Thumbnail check | |
| let thumbContent = ''; | |
| if (f.status === 'done' && f.out?.url && f.out.fmt !== 'pdf') { | |
| thumbContent = `<img src="${f.out.url}" alt="${f.name}">`; | |
| } else if (f.file.type.startsWith('image/svg') || f.name.endsWith('.svg')) { | |
| thumbContent = `<span class="file-thumb-icon">🎨</span>`; | |
| } else if (f.name.endsWith('.heic') || f.name.endsWith('.heif')) { | |
| thumbContent = `<span class="file-thumb-icon">🍏</span>`; | |
| } else { | |
| thumbContent = `<img src="${f.srcUrl}" alt="${f.name}" onerror="this.parentNode.innerHTML='<span class=\\'file-thumb-icon\\'>🖼️</span>'">`; | |
| } | |
| // Details row | |
| let metaDetails = `<span>${App.formatBytes(f.srcSize)}</span>`; | |
| if (f.srcDims) { | |
| metaDetails += `<span>•</span><span>${f.srcDims.w}x${f.srcDims.h}px</span>`; | |
| } | |
| if (f.out) { | |
| const delta = f.out.size - f.srcSize; | |
| const pct = ((delta / f.srcSize) * 100).toFixed(1); | |
| const sign = delta < 0 ? '' : '+'; | |
| const cssClass = delta < 0 ? 'positive' : 'negative'; | |
| metaDetails += ` | |
| <span class="meta-arrow">→</span> | |
| <span>${App.formatBytes(f.out.size)}</span> | |
| <span>•</span> | |
| <span class="meta-saving ${cssClass}">(${sign}${pct}%)</span> | |
| `; | |
| if (f.out.dims) { | |
| metaDetails += `<span>•</span><span>${f.out.dims.w}x${f.out.dims.h}px</span>`; | |
| } | |
| } | |
| // Status Badge | |
| let badgeHtml = ''; | |
| if (f.status === 'pending') badgeHtml = `<span class="file-status-badge pending">${I18n.t('badge_pending', 'ожидает')}</span>`; | |
| if (f.status === 'processing') badgeHtml = `<span class="file-status-badge processing"><span class="loading-spinner"></span> ${I18n.t('badge_processing', 'сжатие...')}</span>`; | |
| if (f.status === 'done') badgeHtml = `<span class="file-status-badge done">${I18n.t('badge_done', '✓ готово')}</span>`; | |
| if (f.status === 'error') badgeHtml = `<span class="file-status-badge error">${I18n.t('badge_error', '✗ ошибка')}</span>`; | |
| // Actions buttons | |
| const isDlDisabled = f.status !== 'done' ? 'disabled' : ''; | |
| const isCvDisabled = f.status === 'processing' ? 'disabled' : ''; | |
| card.innerHTML = ` | |
| <div class="file-thumb">${thumbContent}</div> | |
| <div class="file-details"> | |
| <div class="file-name" title="${f.out?.name || f.name}">${f.out?.name || f.name}</div> | |
| <div class="file-meta-row">${metaDetails}</div> | |
| <div style="margin-top: 4px; display:flex; gap: 8px; align-items:center;"> | |
| ${badgeHtml} | |
| ${f.error ? `<span style="color:var(--error); font-size:11px;">${f.error}</span>` : ''} | |
| </div> | |
| </div> | |
| <div class="file-actions"> | |
| <button class="icon-btn primary-btn" title="Скачать результат" ${isDlDisabled} id="dl-btn-${f.id}"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> | |
| </button> | |
| <button class="icon-btn" title="Запустить конвертацию" ${isCvDisabled} id="cv-btn-${f.id}"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg> | |
| </button> | |
| <button class="icon-btn" title="Убрать из списка" id="rm-btn-${f.id}"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> | |
| </button> | |
| </div> | |
| `; | |
| // Event Listeners on buttons | |
| card.querySelector(`#dl-btn-${f.id}`).addEventListener('click', () => this.downloadSingle(f)); | |
| card.querySelector(`#cv-btn-${f.id}`).addEventListener('click', () => this.processFile(f)); | |
| card.querySelector(`#rm-btn-${f.id}`).addEventListener('click', () => this.removeFile(f.id)); | |
| container.appendChild(card); | |
| }); | |
| this.updateBulkDownloadBar(); | |
| }, | |
| // Remove single file | |
| removeFile(id) { | |
| const f = this.files.find(x => x.id === id); | |
| if (f) { | |
| if (f.srcUrl) URL.revokeObjectURL(f.srcUrl); | |
| if (f.out?.url) URL.revokeObjectURL(f.out.url); | |
| } | |
| this.files = this.files.filter(x => x.id !== id); | |
| if (this.files.length === 0) { | |
| document.getElementById('imageQueueCard').classList.add('hidden'); | |
| document.getElementById('bulkDownloadBar').classList.add('hidden'); | |
| } | |
| this.renderQueue(); | |
| }, | |
| // Trigger individual file download | |
| downloadSingle(f) { | |
| if (!f.out) return; | |
| const a = document.createElement('a'); | |
| a.href = f.out.url; | |
| a.download = f.out.name; | |
| document.body.appendChild(a); | |
| a.click(); | |
| a.remove(); | |
| }, | |
| // Update total savings count and ZIP button visibility | |
| updateBulkDownloadBar() { | |
| const bar = document.getElementById('bulkDownloadBar'); | |
| const text = document.getElementById('bulkSavingsText'); | |
| const finished = this.files.filter(f => f.status === 'done'); | |
| if (finished.length <= 1) { | |
| bar.classList.add('hidden'); | |
| return; | |
| } | |
| const totalIn = finished.reduce((s, f) => s + f.srcSize, 0); | |
| const totalOut = finished.reduce((s, f) => s + f.out.size, 0); | |
| const delta = totalIn - totalOut; | |
| if (delta > 0) { | |
| const savedPct = ((delta / totalIn) * 100).toFixed(1); | |
| text.textContent = `Готово: Сэкономлено всего ${App.formatBytes(delta)} (-${savedPct}%)`; | |
| } else { | |
| text.textContent = `Готово: Конвертировано ${finished.length} файлов`; | |
| } | |
| bar.classList.remove('hidden'); | |
| }, | |
| // Trigger conversion of ALL items | |
| async processAll() { | |
| const processBtn = document.getElementById('processAllImagesBtn'); | |
| processBtn.disabled = true; | |
| for (const f of this.files) { | |
| if (f.status !== 'done' && f.status !== 'processing') { | |
| await this.processFile(f); | |
| } | |
| } | |
| processBtn.disabled = false; | |
| App.showToast('Пакетная обработка завершена', 'success'); | |
| }, | |
| // core file processing engine | |
| async processFile(f) { | |
| f.status = 'processing'; | |
| f.error = null; | |
| this.renderQueue(); | |
| let tempObjectUrl = null; | |
| let imageSource = null; | |
| try { | |
| let targetFileBlob = f.file; | |
| // 1. Apple HEIC/HEIF Decoding Wrapper | |
| const ext = f.name.split('.').pop().toLowerCase(); | |
| if (['heic', 'heif'].includes(ext)) { | |
| if (typeof window.heic2any !== 'function') { | |
| throw new Error('Модуль HEIC-декодера не загружен.'); | |
| } | |
| // Convert HEIC blob to PNG | |
| const pngBlob = await window.heic2any({ | |
| blob: f.file, | |
| toType: 'image/png' | |
| }); | |
| targetFileBlob = Array.isArray(pngBlob) ? pngBlob[0] : pngBlob; | |
| } | |
| // 2. Load into HTML Image representation | |
| imageSource = await this.loadImageSource(targetFileBlob); | |
| f.srcDims = { w: imageSource.width, h: imageSource.height }; | |
| let finalBlob = null; | |
| let finalDims = { w: imageSource.width, h: imageSource.height }; | |
| // 3. Size constraints calculations & smart compression | |
| if (this.options.targetSizeLimit) { | |
| // Run Binary Search for target size limit | |
| const limitBytes = this.options.targetSizeValue * 1024; | |
| const searchResult = await this.compressToTargetSize(imageSource, this.options.targetFormat, limitBytes); | |
| finalBlob = searchResult.blob; | |
| finalDims = searchResult.dims; | |
| } else { | |
| // standard manual settings | |
| const canvas = this.drawCanvas(imageSource, this.options.maxDimension, this.options.bgWhite); | |
| finalDims = { w: canvas.width, h: canvas.height }; | |
| finalBlob = await this.canvasToBlobWrapper(canvas, this.options.targetFormat, this.options.quality); | |
| } | |
| // 4. Output assembly | |
| const outUrl = URL.createObjectURL(finalBlob); | |
| const rawName = f.name.replace(/\.[^.]+$/, ''); | |
| const outExt = this.getFormatExtension(this.options.targetFormat); | |
| const outName = `${rawName}_converted.${outExt}`; | |
| // Revoke old out if exists | |
| if (f.out?.url) URL.revokeObjectURL(f.out.url); | |
| f.out = { | |
| blob: finalBlob, | |
| url: outUrl, | |
| size: finalBlob.size, | |
| name: outName, | |
| fmt: this.options.targetFormat, | |
| dims: finalDims | |
| }; | |
| f.status = 'done'; | |
| if (this.options.autoDownload) { | |
| this.downloadSingle(f); | |
| } | |
| } catch (err) { | |
| console.error(err); | |
| f.status = 'error'; | |
| f.error = err.message || 'Ошибка обработки'; | |
| } finally { | |
| // Clean temporary references | |
| if (imageSource && imageSource.source && imageSource.source.close) { | |
| imageSource.source.close(); | |
| } | |
| this.renderQueue(); | |
| } | |
| }, | |
| // Image loader utility trying ImageBitmap first | |
| async loadImageSource(blob) { | |
| try { | |
| const bitmap = await createImageBitmap(blob); | |
| return { source: bitmap, width: bitmap.width, height: bitmap.height, type: 'bitmap' }; | |
| } catch (e) { | |
| return new Promise((resolve, reject) => { | |
| const url = URL.createObjectURL(blob); | |
| const img = new Image(); | |
| img.onload = () => { | |
| resolve({ source: img, width: img.naturalWidth, height: img.naturalHeight, type: 'img', url }); | |
| }; | |
| img.onerror = () => { | |
| URL.revokeObjectURL(url); | |
| reject(new Error('Не удалось прочитать структуру изображения')); | |
| }; | |
| img.src = url; | |
| }); | |
| } | |
| }, | |
| // Scale, background, and draw image to Canvas | |
| drawCanvas(imgInfo, maxSide, bgWhite) { | |
| let w = imgInfo.width; | |
| let h = imgInfo.height; | |
| // Apply max dimension scaling | |
| if (maxSide > 0 && Math.max(w, h) > maxSide) { | |
| const ratio = maxSide / Math.max(w, h); | |
| w = Math.round(w * ratio); | |
| h = Math.round(h * ratio); | |
| } | |
| // ICO limit dimension | |
| if (this.options.targetFormat === 'ico') { | |
| const target = Math.min(256, Math.max(w, h)); | |
| const ratio = target / Math.max(w, h); | |
| w = Math.round(w * ratio); | |
| h = Math.round(h * ratio); | |
| } | |
| const canvas = document.createElement('canvas'); | |
| canvas.width = w; | |
| canvas.height = h; | |
| const ctx = canvas.getContext('2d'); | |
| // Fill background if format requires | |
| const needsBg = ['jpeg', 'bmp'].includes(this.options.targetFormat) && bgWhite; | |
| if (needsBg) { | |
| ctx.fillStyle = '#ffffff'; | |
| ctx.fillRect(0, 0, w, h); | |
| } | |
| ctx.drawImage(imgInfo.source, 0, 0, w, h); | |
| return canvas; | |
| }, | |
| // Core formatting encoder router | |
| async canvasToBlobWrapper(canvas, format, quality) { | |
| const mimeTypes = { | |
| png: 'image/png', | |
| jpeg: 'image/jpeg', | |
| webp: 'image/webp', | |
| avif: 'image/avif' | |
| }; | |
| if (['png', 'jpeg', 'webp'].includes(format)) { | |
| return new Promise((resolve, reject) => { | |
| canvas.toBlob(blob => { | |
| if (blob) resolve(blob); | |
| else reject(new Error(`Браузер не скомпилировал ${format.toUpperCase()}`)); | |
| }, mimeTypes[format], quality); | |
| }); | |
| } | |
| if (format === 'avif') { | |
| return new Promise((resolve, reject) => { | |
| canvas.toBlob(blob => { | |
| // If browser doesn't support native AVIF encoding, it will fallback to PNG or return null | |
| if (blob && blob.type === 'image/avif') { | |
| resolve(blob); | |
| } else { | |
| // Graceful fallback to high-quality WebP with warning | |
| App.showToast('AVIF-кодирование не поддерживается браузером. Выполняю экспорт в WebP.', 'warning'); | |
| canvas.toBlob(webpBlob => { | |
| resolve(webpBlob); | |
| }, 'image/webp', quality); | |
| } | |
| }, 'image/avif', quality); | |
| }); | |
| } | |
| if (format === 'bmp') { | |
| return this.encodeBMP(canvas); | |
| } | |
| if (format === 'ico') { | |
| return this.encodeICO(canvas); | |
| } | |
| if (format === 'pdf') { | |
| return this.encodePDF(canvas); | |
| } | |
| throw new Error('Неподдерживаемый целевой формат'); | |
| }, | |
| // Binary search size optimizer | |
| async compressToTargetSize(imgInfo, format, limitBytes) { | |
| let scale = 1.0; | |
| // For BMP, since it is raw bytes, we can calculate size mathematically | |
| // size = 54 + rowSize * h | |
| if (format === 'bmp') { | |
| const getBmpSize = (w, h) => { | |
| const rowSize = Math.floor((24 * w + 31) / 32) * 4; | |
| return 54 + rowSize * h; | |
| }; | |
| let w = imgInfo.width; | |
| let h = imgInfo.height; | |
| // Scale down factor calculation directly | |
| if (getBmpSize(w, h) > limitBytes) { | |
| // size roughly scales quadratically with scale factor | |
| scale = Math.sqrt(limitBytes / getBmpSize(w, h)) * 0.95; | |
| } | |
| const canvas = this.drawCanvas(imgInfo, Math.max(w, h) * scale, this.options.bgWhite); | |
| const blob = await this.encodeBMP(canvas); | |
| return { blob, dims: { w: canvas.width, h: canvas.height } }; | |
| } | |
| // For PDF/PNG (lossless types): Binary search on canvas dimensions scale factor | |
| if (format === 'png' || format === 'pdf') { | |
| let lo = 0.05, hi = 1.0, bestBlob = null, bestDims = null; | |
| for (let i = 0; i < 10; i++) { | |
| const currentScale = (lo + hi) / 2; | |
| const maxSide = Math.max(imgInfo.width, imgInfo.height) * currentScale; | |
| const canvas = this.drawCanvas(imgInfo, maxSide, this.options.bgWhite); | |
| const blob = await this.canvasToBlobWrapper(canvas, format, 0.9); // high quality | |
| if (blob.size <= limitBytes) { | |
| bestBlob = blob; | |
| bestDims = { w: canvas.width, h: canvas.height }; | |
| lo = currentScale; // Try larger | |
| } else { | |
| hi = currentScale; // Try smaller | |
| } | |
| } | |
| if (bestBlob) return { blob: bestBlob, dims: bestDims }; | |
| // Minimal fail-safe | |
| const canvas = this.drawCanvas(imgInfo, Math.max(imgInfo.width, imgInfo.height) * 0.05, this.options.bgWhite); | |
| const blob = await this.canvasToBlobWrapper(canvas, format, 0.5); | |
| return { blob, dims: { w: canvas.width, h: canvas.height } }; | |
| } | |
| // For JPEG / WebP / AVIF (lossy formats): | |
| // First, binary search on QUALITY with full image resolution | |
| let canvas = this.drawCanvas(imgInfo, this.options.maxDimension, this.options.bgWhite); | |
| let lo = 0.01, hi = 0.99, bestBlob = null; | |
| for (let i = 0; i < 12; i++) { | |
| const q = (lo + hi) / 2; | |
| const blob = await this.canvasToBlobWrapper(canvas, format, q); | |
| if (blob.size <= limitBytes) { | |
| bestBlob = blob; | |
| lo = q; // Try higher quality | |
| } else { | |
| hi = q; // Try lower quality | |
| } | |
| } | |
| if (bestBlob) { | |
| return { blob: bestBlob, dims: { w: canvas.width, h: canvas.height } }; | |
| } | |
| // If even quality 0.01 is too large, scale down dimensions sequentially | |
| scale = 0.9; | |
| while (scale > 0.05) { | |
| const side = Math.max(imgInfo.width, imgInfo.height) * scale; | |
| canvas = this.drawCanvas(imgInfo, side, this.options.bgWhite); | |
| const blob = await this.canvasToBlobWrapper(canvas, format, 0.4); // moderate quality | |
| if (blob.size <= limitBytes) { | |
| return { blob, dims: { w: canvas.width, h: canvas.height } }; | |
| } | |
| scale -= 0.1; | |
| } | |
| // Worst-case escape fallback | |
| canvas = this.drawCanvas(imgInfo, Math.max(imgInfo.width, imgInfo.height) * 0.05, this.options.bgWhite); | |
| const blob = await this.canvasToBlobWrapper(canvas, format, 0.1); | |
| return { blob, dims: { w: canvas.width, h: canvas.height } }; | |
| }, | |
| // 24-bit uncompressed BMP encoder | |
| encodeBMP(canvas) { | |
| const w = canvas.width; | |
| const h = canvas.height; | |
| const ctx = canvas.getContext('2d'); | |
| const imgData = ctx.getImageData(0, 0, w, h); | |
| const pixels = imgData.data; | |
| const rowSize = Math.floor((24 * w + 31) / 32) * 4; | |
| const pixelArraySize = rowSize * h; | |
| const fileSize = 54 + pixelArraySize; | |
| const buf = new ArrayBuffer(fileSize); | |
| const view = new DataView(buf); | |
| // BMP File Header | |
| view.setUint16(0, 0x4D42, true); // Signature 'BM' | |
| view.setUint32(2, fileSize, true); // total file size | |
| view.setUint32(6, 0, true); // reserved | |
| view.setUint32(10, 54, true); // offset to image data | |
| // DIB Header | |
| view.setUint32(14, 40, true); // DIB header length | |
| view.setInt32(18, w, true); // image width | |
| view.setInt32(22, h, true); // image height (positive = bottom-to-top) | |
| view.setUint16(26, 1, true); // color planes | |
| view.setUint16(28, 24, true); // bits per pixel | |
| view.setUint32(30, 0, true); // compression: BI_RGB (none) | |
| view.setUint32(34, pixelArraySize, true); // byte size of pixel array | |
| view.setInt32(38, 2835, true); // x pixels/meter (72 dpi) | |
| view.setInt32(42, 2835, true); // y pixels/meter | |
| view.setUint32(46, 0, true); // palette colors | |
| view.setUint32(50, 0, true); // important colors | |
| // Pixel data loop (packed BGR format, flipped vertically, with 4-byte padding) | |
| const bytes = new Uint8Array(buf); | |
| let dst = 54; | |
| for (let y = h - 1; y >= 0; y--) { | |
| let src = y * w * 4; | |
| for (let x = 0; x < w; x++) { | |
| bytes[dst] = pixels[src + 2]; // Blue | |
| bytes[dst + 1] = pixels[src + 1]; // Green | |
| bytes[dst + 2] = pixels[src]; // Red | |
| dst += 3; | |
| src += 4; | |
| } | |
| // row padding to align to multiple of 4 bytes | |
| while ((dst - 54) % rowSize !== 0) { | |
| bytes[dst++] = 0; | |
| } | |
| } | |
| return new Blob([buf], { type: 'image/bmp' }); | |
| }, | |
| // ICO Encoder (packages standard PNG within ICO file structure) | |
| async encodeICO(canvas) { | |
| const pngBlob = await new Promise((resolve, reject) => { | |
| canvas.toBlob(b => b ? resolve(b) : reject(new Error('Сбой кодирования PNG для ICO')), 'image/png'); | |
| }); | |
| const pngBuf = await pngBlob.arrayBuffer(); | |
| const pngBytes = new Uint8Array(pngBuf); | |
| // ICO size restrictions | |
| const w = canvas.width >= 256 ? 0 : canvas.width; | |
| const h = canvas.height >= 256 ? 0 : canvas.height; | |
| const headerSize = 6 + 16; | |
| const totalSize = headerSize + pngBytes.length; | |
| const outBytes = new Uint8Array(totalSize); | |
| const view = new DataView(outBytes.buffer); | |
| // Icon Directory Header | |
| view.setUint16(0, 0, true); // reserved | |
| view.setUint16(2, 1, true); // image type: 1 = ICO | |
| view.setUint16(4, 1, true); // number of images in file (1) | |
| // Icon Directory Entry | |
| outBytes[6] = w; | |
| outBytes[7] = h; | |
| outBytes[8] = 0; // color palette size (0 for truecolor) | |
| outBytes[9] = 0; // reserved | |
| view.setUint16(10, 1, true); // color planes | |
| view.setUint16(12, 32, true); // bits per pixel | |
| view.setUint32(14, pngBytes.length, true); // size of image bytes | |
| view.setUint32(18, headerSize, true); // offset to image bytes | |
| // Paste actual PNG stream | |
| outBytes.set(pngBytes, headerSize); | |
| return new Blob([outBytes.buffer], { type: 'image/x-icon' }); | |
| }, | |
| // PDF Encoder using jsPDF from local lib | |
| async encodePDF(canvas) { | |
| if (!window.jspdf || !window.jspdf.jsPDF) { | |
| throw new Error('Библиотека jsPDF не загружена. Проверьте lib/jspdf.umd.min.js'); | |
| } | |
| const { jsPDF } = window.jspdf; | |
| // Setup document matching canvas aspect ratio | |
| const doc = new jsPDF({ | |
| orientation: canvas.width > canvas.height ? 'l' : 'p', | |
| unit: 'px', | |
| format: [canvas.width, canvas.height] | |
| }); | |
| const imgData = canvas.toDataURL('image/jpeg', 0.95); | |
| doc.addImage(imgData, 'JPEG', 0, 0, canvas.width, canvas.height); | |
| const pdfBlob = doc.output('blob'); | |
| return new Blob([pdfBlob], { type: 'application/pdf' }); | |
| }, | |
| // Get matching extension string | |
| getFormatExtension(fmt) { | |
| const mapping = { | |
| png: 'png', | |
| jpeg: 'jpg', | |
| webp: 'webp', | |
| avif: 'avif', | |
| bmp: 'bmp', | |
| ico: 'ico', | |
| pdf: 'pdf' | |
| }; | |
| return mapping[fmt] || 'bin'; | |
| }, | |
| // Package processed list to JSZip and trigger download | |
| async downloadAllAsZip() { | |
| const finished = this.files.filter(f => f.status === 'done'); | |
| if (finished.length === 0) { | |
| App.showToast('Нет готовых файлов для скачивания', 'warning'); | |
| return; | |
| } | |
| if (!window.JSZip) { | |
| App.showToast('Библиотека JSZip не загружена. Проверьте lib/jszip.min.js', 'error'); | |
| return; | |
| } | |
| App.showToast('Сборка архива ZIP...', 'info'); | |
| const zip = new window.JSZip(); | |
| finished.forEach(f => { | |
| zip.file(f.out.name, f.out.blob); | |
| }); | |
| try { | |
| const zipBlob = await zip.generateAsync({ type: 'blob' }); | |
| const url = URL.createObjectURL(zipBlob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `omniconvert_images_${Date.now()}.zip`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| a.remove(); | |
| setTimeout(() => URL.revokeObjectURL(url), 5000); | |
| App.showToast('Архив успешно скачан!', 'success'); | |
| } catch (e) { | |
| App.showToast('Ошибка создания архива: ' + e.message, 'error'); | |
| } | |
| } | |
| }; | |
| // Initialize module | |
| document.addEventListener('DOMContentLoaded', () => { | |
| ImageHub.init(); | |
| }); | |