Werkzeuge Dokumente Daoark EN Startseite Startseite / Bildwerkzeuge maxW ? maxW : img.width; var h = maxW && img.width > maxW ? Math.round(img.height * maxW / img.width) : img.height; var canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, w, h); var mime = file.type === 'image/png' ? 'image/png' : 'image/jpeg'; var outMime = mime; // 尝试 WebP 输出 (如支持) try { var test = canvas.toDataURL('image/webp', quality); if (test.startsWith('data:image/webp')) outMime = 'image/webp'; } catch(e) {} var dataUrl = canvas.toDataURL(outMime, quality); var b64 = dataUrl.split(',')[1]; var outSize = Math.floor(b64.length * 3 / 4); var ratio = ((1 - outSize / file.size) * 100).toFixed(1); var ext = outMime.split('/')[1]; resultContent.innerHTML = '

下载压缩后图片'; resultMeta.innerHTML = '

原图: ' + file.name + ' (' + img.width + '×' + img.height + ', ' + fmtSize(file.size) + ')

压缩后: ' + w + '×' + h + ', ' + outMime + ', ' + fmtSize(outSize) + '

压缩比: ' + ratio + '% (' + (ratio > 0 ? '节省' : '增大') + ' ' + fmtSize(Math.abs(file.size - outSize)) + ')

'; resultArea.classList.add('show'); btnMain.disabled = false; btnMain.textContent = orig; }; img.onerror = function() { showError('图片加载失败'); btnMain.disabled = false; btnMain.textContent = orig; }; img.src = ev.target.result; }; reader.onerror = function() { showError('文件读取失败'); btnMain.disabled = false; btnMain.textContent = orig; }; reader.readAsDataURL(file); }); btnClear.addEventListener('click', function() { form.reset(); qv.textContent = '80'; clearError(); clearResult(); }); })();