fix(capture): show bg-removed cutout on Measure Zoom/Pan immediately
Tape-mode PhotoStage skipped mask checkerboard painting, so Zoom/Pan depended on async createMaskedPreviewBlob — a hang/fail left the stage without a cutout. Paint mask overlay in tape mode, mount PhotoStage on source+bitset right away (swap to alpha PNG when ready), checkerboard stage backdrop, and prefer HTML canvas for the preview encode.
This commit is contained in:
@@ -228,19 +228,21 @@
|
||||
{/if}
|
||||
</p>
|
||||
|
||||
{#if maskedPreview}
|
||||
<PhotoStage
|
||||
mode="tape"
|
||||
blob={maskedPreview}
|
||||
{tape}
|
||||
{cropFill}
|
||||
{gestureMode}
|
||||
onTapeChange={onTapeChange}
|
||||
/>
|
||||
{:else}
|
||||
<div class="preview-loading" role="status">
|
||||
{previewError || 'Preparing background-removed preview…'}
|
||||
</div>
|
||||
<!-- Cutout first: source + maskBitset paints checkerboard immediately (tape mode).
|
||||
When createMaskedPreviewBlob finishes, swap to alpha PNG (same footprint). -->
|
||||
<PhotoStage
|
||||
mode="tape"
|
||||
blob={maskedPreview ?? state.source.blob}
|
||||
maskBitset={maskedPreview ? null : state.approvedMask.bitset}
|
||||
{maskW}
|
||||
{maskH}
|
||||
{tape}
|
||||
{cropFill}
|
||||
{gestureMode}
|
||||
onTapeChange={onTapeChange}
|
||||
/>
|
||||
{#if previewError}
|
||||
<p class="preview-err" role="status">{previewError}</p>
|
||||
{/if}
|
||||
|
||||
<div class="controls">
|
||||
@@ -449,7 +451,7 @@
|
||||
.mode-btn.active { background: #00e5ff; color: #002; }
|
||||
.mode-hint { margin: 0 0 10px; }
|
||||
.nudge { color: #e8a; font-size: 0.74rem; margin: 6px 0 0; line-height: 1.45; }
|
||||
.preview-loading { min-height: 420px; border: 1px solid #333; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; text-align: center; padding: 16px; box-sizing: border-box; }
|
||||
.preview-err { color: #ffb4a2; font-size: 0.85rem; margin: 8px 0 0; }
|
||||
.controls { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
|
||||
.ctl-label { font-size: 0.78rem; color: #aaa; margin: 0 0 6px; }
|
||||
.ctl-label .sub { font-size: 0.7rem; color: #777; }
|
||||
|
||||
Reference in New Issue
Block a user