Canvas 与 ImageBitmap 压缩与缩略图持久化实践

概述ImageBitmap 能高效解码图像。本文展示生成缩略图并持久化的流程。生成缩略图与压缩async function createThumb(file, w = 256, h = 256, quality = 0.8) { const bmp = await createImageBitmap(file); const canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; const ctx = canvas.getContext('2d'); ctx.drawImage(bmp, 0, 0, w, h); const blob = await new Promise(r => canvas.toBlob(r, 'image/jpeg', quality)); return blob; } 持久化与读取function openDB(name) { return new Promise((resolve, reject) => { const r = indexedDB.open(name, 1); r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('thumbs')) db.createObjectStore('thumbs', { keyPath:'id' }); }; r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); } async function saveThumb(id, blob) { const db = await openDB('img'); const tx = db.transaction('thumbs','readwrite'); tx.objectStore('thumbs').put({ id, blob }); await new Promise((res, rej) => { tx.oncomplete = res; tx.onerror = () => rej(tx.error); }); db.close(); } async function loadThumb(id) { const db = await openDB('img'); const tx = db.transaction('thumbs','readonly'); const req = tx.objectStore('thumbs').get(id); const rec = await new Promise((res, rej) => { req.onsuccess = () => res(req.result); req.onerror = () => rej(req.error); }); db.close(); return rec ? rec.blob : null; }