Web source: crop to the WIDGET rect (visible-element union excluding full-viewport wrappers) — kills the ghost-boundary dead space

- scrollWidth/scrollHeight returns the whole 1920x1080 canvas for widgets whose body/background
  spans it, so the crop kept massive transparent margins and the content floated in the Fill box.
- ContentBoundsScript now unions every visible element's getBoundingClientRect, excluding elements
  that span >=98% of the viewport (bodies, full-canvas background layers); full-bleed widgets fall
  back to the full rect. Crop taken AT the rect's top-left (l,t) — content pins to bitmap (0,0).
- Web Image explicitly Margin=0 + Left/Top alignment so the frame and widget coincide at the origin.
- Canvas-size render untouched.
This commit is contained in:
2026-08-28 11:45:31 -07:00
parent b862a0fb04
commit a5b9952cbd
4 changed files with 82 additions and 36 deletions
+51 -16
View File
@@ -29,6 +29,8 @@ public sealed class WebView2Manager : IDisposable
public VideoFrame? LatestFrame;
public double ViewportCssW;
public double ViewportCssH;
public double ContentCssX;
public double ContentCssY;
public double ContentCssW;
public double ContentCssH;
public bool Disposed;
@@ -159,19 +161,48 @@ public sealed class WebView2Manager : IDisposable
catch (Exception ex) { AppLog.Write($"WebView2Manager: navigate failed: {ex.Message}"); }
}
// The page's real content rect (scrollWidth/Height) can be smaller than the
// viewport for widgets that don't fill it — the leftover area is dead space
// that must not stretch across the selection box. Crop the capture to the
// content bounds (anchored at 0,0) so the box shows exactly the widget.
// This restores f39ebd9's measurement (scrollWidth/Height), which the
// creator confirmed nailed the right and bottom of the box. The result is
// returned as a real JS object, NOT JSON.stringify — ExecuteScriptAsync
// The true widget rect for the crop. scrollWidth/scrollHeight is useless for
// widgets whose body/background spans the full 1920×1080 canvas — it returns
// the whole viewport, so the crop keeps massive transparent margins and the
// rendered bitmap floats inside the Fill-stretched box ("ghost boundary").
// Fix: union the getBoundingClientRect of every visible element, EXCLUDING
// elements that span (nearly) the full viewport — bodies and full-canvas
// background/overlay layers are layout wrappers, not widget content. If the
// exclusion empties the set, the widget IS full-bleed: use the full rect.
// Returned as a real JS object (NOT JSON.stringify — ExecuteScriptAsync
// JSON-encodes the result, so stringifying would double-encode and the
// JSON parse would throw, silently disabling the crop.
// parse would throw, silently disabling the crop).
private const string ContentBoundsScript =
"({w:document.documentElement.scrollWidth||document.body.scrollWidth||0," +
"h:document.documentElement.scrollHeight||document.body.scrollHeight||0," +
"vw:window.innerWidth||1,vh:window.innerHeight||1})";
"(function(){" +
"var vw=window.innerWidth||1,vh=window.innerHeight||1;" +
"var all=[];var body=document.body;" +
"if(body){var br=body.getBoundingClientRect();if(br.width||br.height)all.push(br);" +
"var els=body.querySelectorAll('*');" +
"for(var i=0;i<els.length;i++){" +
"var st=getComputedStyle(els[i]);" +
"if(st&&st.display==='none')continue;" +
"var r=els[i].getBoundingClientRect();" +
"if(r.width||r.height)all.push(r);" +
"}}" +
"if(!all.length)return null;" +
"var content=[];" +
"for(var j=0;j<all.length;j++){" +
"var rr=all[j];" +
"if(rr.width>=vw*0.98&&rr.height>=vh*0.98)continue;" +
"content.push(rr);" +
"}" +
"var use=content.length?content:all;" +
"var l=use[0].left,t=use[0].top,rt=use[0].right,bt=use[0].bottom;" +
"for(var k=1;k<use.length;k++){" +
"l=Math.min(l,use[k].left);" +
"t=Math.min(t,use[k].top);" +
"rt=Math.max(rt,use[k].right);" +
"bt=Math.max(bt,use[k].bottom);" +
"}" +
"l=Math.max(0,l);t=Math.max(0,t);" +
"return {l:l,t:t,w:Math.max(1,Math.min(vw-l,rt-l))," +
"h:Math.max(1,Math.min(vh-t,bt-t)),vw:vw,vh:vh};" +
"})()";
private async Task QueryContentBoundsAsync(string sourceId)
{
@@ -185,6 +216,8 @@ public sealed class WebView2Manager : IDisposable
var root = doc.RootElement;
session.ViewportCssW = root.GetProperty("vw").GetDouble();
session.ViewportCssH = root.GetProperty("vh").GetDouble();
session.ContentCssX = root.GetProperty("l").GetDouble();
session.ContentCssY = root.GetProperty("t").GetDouble();
session.ContentCssW = root.GetProperty("w").GetDouble();
session.ContentCssH = root.GetProperty("h").GetDouble();
_ = CaptureFrame(sourceId);
@@ -230,23 +263,25 @@ public sealed class WebView2Manager : IDisposable
var stride = pixW * 4;
int cropW = pixW, cropH = pixH;
int cropX = 0, cropY = 0, cropW = pixW, cropH = pixH;
if (session.ViewportCssW >= 1 && session.ViewportCssH >= 1 &&
session.ContentCssW >= 1 && session.ContentCssH >= 1)
{
var sx = pixW / session.ViewportCssW;
var sy = pixH / session.ViewportCssH;
cropW = (int)Math.Clamp(Math.Round(session.ContentCssW * sx), 1, pixW);
cropH = (int)Math.Clamp(Math.Round(session.ContentCssH * sy), 1, pixH);
cropX = (int)Math.Clamp(Math.Round(session.ContentCssX * sx), 0, pixW - 1);
cropY = (int)Math.Clamp(Math.Round(session.ContentCssY * sy), 0, pixH - 1);
cropW = (int)Math.Clamp(Math.Round(session.ContentCssW * sx), 1, pixW - cropX);
cropH = (int)Math.Clamp(Math.Round(session.ContentCssH * sy), 1, pixH - cropY);
}
var outPixels = pixels;
if (cropW != pixW || cropH != pixH)
if (cropW != pixW || cropH != pixH || cropX != 0 || cropY != 0)
{
var dstStride = cropW * 4;
outPixels = new byte[dstStride * cropH];
for (var r = 0; r < cropH; r++)
Buffer.BlockCopy(pixels, r * stride, outPixels, r * dstStride, dstStride);
Buffer.BlockCopy(pixels, (cropY + r) * stride + cropX * 4, outPixels, r * dstStride, dstStride);
}
var wb = new WriteableBitmap(cropW, cropH, 96, 96, PixelFormats.Bgra32, null);