/* 彩云间 — 拍照 / 识别中动画 / 结果页 / 云详情 */ function canvasToDataUrl(cv, quality, fallback) { try { return cv.toDataURL('image/jpeg', quality); } catch (e) { return fallback || null; } } function readJpegOrientation(buffer) { const view = new DataView(buffer); if (view.byteLength < 4 || view.getUint16(0, false) !== 0xffd8) return 1; let offset = 2; while (offset + 4 < view.byteLength) { const marker = view.getUint16(offset, false); offset += 2; if (marker === 0xffe1) { const length = view.getUint16(offset, false); const exif = offset + 2; if (exif + 10 > view.byteLength) return 1; if (view.getUint32(exif, false) !== 0x45786966) return 1; const tiff = exif + 6; const little = view.getUint16(tiff, false) === 0x4949; const firstIfd = tiff + view.getUint32(tiff + 4, little); const entries = view.getUint16(firstIfd, little); for (let i = 0; i < entries; i++) { const entry = firstIfd + 2 + i * 12; if (entry + 10 > view.byteLength) return 1; if (view.getUint16(entry, little) === 0x0112) return view.getUint16(entry + 8, little); } return 1; } if ((marker & 0xff00) !== 0xff00) break; offset += view.getUint16(offset, false); } return 1; } function drawOrientedImage(img, orientation, max, quality, fallback) { const swap = orientation >= 5 && orientation <= 8; const srcW = img.width; const srcH = img.height; const outW = swap ? srcH : srcW; const outH = swap ? srcW : srcH; const scale = Math.min(1, max / Math.max(outW, outH)); const cv = document.createElement('canvas'); cv.width = Math.round(outW * scale); cv.height = Math.round(outH * scale); const ctx = cv.getContext('2d'); ctx.save(); ctx.scale(scale, scale); switch (orientation) { case 2: ctx.translate(outW, 0); ctx.scale(-1, 1); break; case 3: ctx.translate(outW, outH); ctx.rotate(Math.PI); break; case 4: ctx.translate(0, outH); ctx.scale(1, -1); break; case 5: ctx.rotate(0.5 * Math.PI); ctx.scale(1, -1); break; case 6: ctx.translate(outW, 0); ctx.rotate(0.5 * Math.PI); break; case 7: ctx.translate(outW, outH); ctx.rotate(0.5 * Math.PI); ctx.scale(-1, 1); break; case 8: ctx.translate(0, outH); ctx.rotate(-0.5 * Math.PI); break; } ctx.drawImage(img, 0, 0); ctx.restore(); return canvasToDataUrl(cv, quality, fallback); } // 把图片按 EXIF 方向转正，并缩放到合理尺寸再用于识别/展示 function normalizeImageFile(file, max = 1280, quality = 0.82) { return new Promise(resolve => { if (!file) return resolve(null); const fallback = () => file.arrayBuffer().then(buffer => { const orientation = readJpegOrientation(buffer); const blob = new Blob([buffer], { type: file.type || 'image/jpeg' }); const url = URL.createObjectURL(blob); const img = new Image(); img.onload = () => { const dataUrl = drawOrientedImage(img, orientation, max, quality); URL.revokeObjectURL(url); resolve(dataUrl); }; img.onerror = () => { URL.revokeObjectURL(url); resolve(null); }; img.src = url; }).catch(() => resolve(null)); if (!window.createImageBitmap) return fallback(); createImageBitmap(file, { imageOrientation: 'from-image' }).then(bitmap => { const scale = Math.min(1, max / Math.max(bitmap.width, bitmap.height)); const cv = document.createElement('canvas'); cv.width = Math.round(bitmap.width * scale); cv.height = Math.round(bitmap.height * scale); cv.getContext('2d').drawImage(bitmap, 0, 0, cv.width, cv.height); if (bitmap.close) bitmap.close(); resolve(canvasToDataUrl(cv, quality)); }).catch(fallback); }); } // 把 dataURL 缩放到合理尺寸。主要用于不支持 createImageBitmap 的浏览器兜底。 function downscaleDataUrl(dataUrl, max = 1280, quality = 0.82) { return new Promise(resolve => { if (!dataUrl) return resolve(dataUrl); const img = new Image(); img.onload = () => { const scale = Math.min(1, max / Math.max(img.width, img.height)); if (scale >= 1) return resolve(dataUrl); // 本来就不大，原样返回 const cv = document.createElement('canvas'); cv.width = Math.round(img.width * scale); cv.height = Math.round(img.height * scale); cv.getContext('2d').drawImage(img, 0, 0, cv.width, cv.height); resolve(canvasToDataUrl(cv, quality, dataUrl)); }; img.onerror = () => resolve(dataUrl); img.src = dataUrl; }); } function skyGradient(tone) { switch (tone) { case 'storm': case 'rain': return 'linear-gradient(180deg,#7d8a99,#9aa7b5 55%,#b8c2cc)'; case 'sunset': return 'linear-gradient(180deg,#5b4a7a,#d4738a 45%,#f3a85f 80%,#f6cf86)'; case 'night': return 'linear-gradient(180deg,#0e1b33,#1c3052 60%,#33507a)'; case 'pearl': return 'linear-gradient(180deg,#9fb6d6,#c9d6e6 55%,#e7e1ec)'; default: return 'linear-gradient(180deg,#7fb6e4,#aed4f2 55%,#dceffb)'; } } // 取景框中的天空（含目标云） function SkyView({ cloud, children }) { const t = cloud.art.tone; const sunWarm = t === 'sunset'; return (
{t !== 'storm' && t !== 'rain' && (
)}
{children}
); } // ── 拍照取景（支持真实相机 / 相册选图 / 无相机时水彩占位）────── function CameraScreen({ fallbackCloud, onShutter, onClose }) { const [snap, setSnap] = React.useState(false); const [camReady, setCamReady] = React.useState(false); const videoRef = React.useRef(null); const streamRef = React.useRef(null); const fileRef = React.useRef(null); React.useEffect(() => { let stream; const md = navigator.mediaDevices; if (md && md.getUserMedia) { md.getUserMedia({ video: { facingMode: { ideal: 'environment' } }, audio: false }) .then(s => { stream = s; streamRef.current = s; if (videoRef.current) { videoRef.current.srcObject = s; videoRef.current.play().catch(()=>{}); } setCamReady(true); }) .catch(() => setCamReady(false)); } return () => { if (stream) stream.getTracks().forEach(t => t.stop()); }; }, []); const grabFrame = () => { const v = videoRef.current; if (!camReady || !v || !v.videoWidth) return null; const srcW = v.videoWidth; const srcH = v.videoHeight; const max = 900; const scale = Math.min(1, max / Math.max(srcW, srcH)); const cv = document.createElement('canvas'); cv.width = Math.round(srcW * scale); cv.height = Math.round(srcH * scale); const ctx = cv.getContext('2d'); ctx.drawImage(v, 0, 0, cv.width, cv.height); return canvasToDataUrl(cv, 0.82); }; const fire = () => { if (snap) return; const photo = grabFrame(); // 真实相机 → dataURL；无相机 → null（走模拟） setSnap(true); setTimeout(() => onShutter(photo), 280); }; const onPick = (e) => { const f = e.target.files && e.target.files[0]; if (!f) return; normalizeImageFile(f, 1280, 0.82).then(onShutter); }; return (
{/* 背景：真实相机画面，否则水彩天空占位 */}