如何在不泄漏帧的情况下渲染帧图像内的屏幕截图/图像？

Question

使用div或canvas，目标是用图像/屏幕截图完全填充设备框架，但又不会溢出框架。

屏幕截图1展示了紧贴框架内的图像。屏幕截图2说明了图像渗漏到框架之外的情况。

第一个挑战是图像/屏幕截图的宽高比可能会有所不同，即可能会使用不同尺寸的图像。例如，一个图像可以是1242x2688，而另一图像可以是1440x2960。无论宽高比如何，屏幕截图都应填充框架，但不会流过其边缘。

第二个挑战是它们在CSS中的缩放比例通常transform: scale(x)约为25％，浏览器的舍入行为在此比例下会产生像素大小的间隙。但是，当比例恢复到100％时，这些差距将消失。

我们尝试了两种选择。两者都有缺陷。

两者都使图像/屏幕截图成为帧div的子div。

选项1：填充值

我们使用“ padding”值来调整子div的宽度，高度和位置（即屏幕截图），以使其适合其父框架。但是，具有不同长宽比的图像可能会渗漏到框架之外或无法填满框架。

选项2：剪切路径

我们使用剪切路径来表示框架内的区域，但有时会出现间隙，具体取决于CSS缩放值。我们不能允许差距。

下面的代码和Codepen中说明了间隙问题。

还有其他选择吗？

Codepen（说明差距）：https ://codepen.io/anon/pen/yWXvJE

.colorClassProxy {
  display: none
}

.itemBox, .itemBox > * {
    position: absolute;
    box-sizing: border-box;
}

.backgroundColorBox, .backgroundGraphicBox, .foregroundBox, .frameBox {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;"><div class="backgroundColorBox" style="width: 163px; height: 335px; top: 17px; left: 4px; -webkit-mask-image: url(&quot;data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2241.7%20142.4%201445.2%202965.9%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1359.3,3105.3h-1190c-68.8,0-124.6-53.2-124.6-118.9V264.3c0-65.7,55.8-118.9,124.6-118.9h1190%20%20c68.8,0,124.6,53.3,124.6,118.9l0,2722.1C1484,3052.1,1428.2,3105.4,1359.3,3105.3L1359.3,3105.3z%22%20style=%22fill:%20white;%20stroke:%20white;%20stroke-width:%206;%22/%3E%3C/svg%3E&quot;); background-size: cover;"></div><div class="backgroundGraphicBox" style="width: 163px; height: 335px; top: 17px; left: 4px; -webkit-mask-image: url(&quot;data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2241.7%20142.4%201445.2%202965.9%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1359.3,3105.3h-1190c-68.8,0-124.6-53.2-124.6-118.9V264.3c0-65.7,55.8-118.9,124.6-118.9h1190%20%20c68.8,0,124.6,53.3,124.6,118.9l0,2722.1C1484,3052.1,1428.2,3105.4,1359.3,3105.3L1359.3,3105.3z%22%20style=%22fill:%20white;%20stroke:%20white;%20stroke-width:%206;%22/%3E%3C/svg%3E&quot;); background-size: cover;"></div><div class="foregroundBox" style="width: 163px;height: 335px;top: 17px;left: 4px;-webkit-mask-image: url(&quot;data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2241.7%20142.4%201445.2%202965.9%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1359.3,3105.3h-1190c-68.8,0-124.6-53.2-124.6-118.9V264.3c0-65.7,55.8-118.9,124.6-118.9h1190%20%20c68.8,0,124.6,53.3,124.6,118.9l0,2722.1C1484,3052.1,1428.2,3105.4,1359.3,3105.3L1359.3,3105.3z%22%20style=%22fill:%20white;%20stroke:%20white;%20stroke-width:%206;%22/%3E%3C/svg%3E&quot;);background-size: cover;background-image: url(https://uce9d8d4a8a6c69a057e9a584674.dl.dropboxusercontent.com/cd/0/inline/AhH2Z_q_te_Yu3IKd2cdiB0XMhJEzRdO4KP686rb3VdE1hxeIamOskpIoAhrxKegUAxERpAIyX3g0VABD7EU5S4JWe9X_Q1zdaS2hsoD_SpI4w/file#);"></div><div class="frameBox" data-natural-width="1528.64" data-natural-height="3224.29" style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTI4LjY0IiBoZWlnaHQ9IjMyMjQuMjkiIHZpZXdCb3g9IjAgMCAxNTI4LjY0IDMyMjQuMjkiIGRhdGEtaHAtY29sb3ItcHJlcGFyZWQ9InRydWUiIHN0eWxlPSItLWhwLWNvbG9yLTluYXo1Z0JWLTE6cmdiKDI1NSwgMjU1LCAyNTUpOyAtLWhwLWNvbG9yLTluYXo1Z0JWLTI6dXJsKFwjY29sb3ItOW5hejVnQlYtMik7Ij48cmFkaWFsR3JhZGllbnQgaWQ9ImNvbG9yLTluYXo1Z0JWLTIiIGRhdGEtY3NzPSJyYWRpYWwtZ3JhZGllbnQocmdiKDY3LCA2NywgNjcpLCByZ2IoMCwgMCwgMCkpIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI3MC43MSUiPjxzdG9wIHN0b3AtY29sb3I9InJnYig2Nyw2Nyw2NykiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMCwwLDApIiBvZmZzZXQ9IjEwMCUiLz48L3JhZGlhbEdyYWRpZW50Pjx0aXRsZT5Bc3NldCAyPC90aXRsZT48cGF0aCBkPSJNODU3Ljc4LDcyLjY4SDY3MC44NmMtNy42NCwwLTEzLjg1LDUuOTEtMTMuODUsMTMuMjFzNi4yMSwxMy4yMSwxMy44NSwxMy4yMUg4NTcuNzhjNy42NiwwLDEzLjg1LTUuOTEsMTMuODUtMTMuMjFTODY1LjQ0LDcyLjY4LDg1Ny43OCw3Mi42OFoiIGZpbGw9IiNlOGVlZWYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3R5bGU9ImZpbGw6IHZhcigtLWhwLWNvbG9yLTluYXo1Z0JWLTEpOyIvPjxwYXRoIGQ9Ik0xNTE0Ljc5LDc4Ni4yNlYxNjUuMTdDMTUxNC43OSw3My45NSwxNDM3LjI5LDAsMTM0MS43MiwwSDE4Ni45MkM5MS4zMywwLDEzLjg1LDczLjk1LDEzLjg1LDE2NS4xN1Y0NzUuNzFDNi4xOSw0NzUuNzEsMCw0ODEuNjIsMCw0ODguOTJWODU4LjkzYzAsNy4zLDYuMTksMTMuMjEsMTMuODUsMTMuMjF2MTMyLjE1QzYuMTksMTAwNC4yOSwwLDEwMTAuMiwwLDEwMTcuNXYxOTguMjFjMCw3LjMxLDYuMTksMTMuMjIsMTMuODUsMTMuMjJWMzA1OS4xYzAsOTEuMjMsNzcuNDgsMTY1LjE5LDE3My4wNywxNjUuMTloMTE1NC44Yzk1LjU3LDAsMTczLjA3LTczLjk2LDE3My4wNy0xNjUuMTlWMTAxNy41YzcuNjQsMCwxMy44NS01LjkxLDEzLjg1LTEzLjIxVjc5OS40N0MxNTI4LjY0LDc5Mi4xNywxNTIyLjQzLDc4Ni4yNiwxNTE0Ljc5LDc4Ni4yNlpNNjcwLjg2LDcyLjY4SDg1Ny43OGM3LjY2LDAsMTMuODUsNS45MSwxMy44NSwxMy4yMVM4NjUuNDQsOTkuMSw4NTcuNzgsOTkuMUg2NzAuODZjLTcuNjQsMC0xMy44NS01LjkxLTEzLjg1LTEzLjIxUzY2My4yMiw3Mi42OCw2NzAuODYsNzIuNjhabTY4OC40OCwzMDMyLjY3SDE2OS4zMmMtNjguODQsMC0xMjQuNjEtNTMuMjQtMTI0LjYxLTExOC45M1YyNjQuMjljMC02NS42OSw1NS43Ny0xMTguOTQsMTI0LjYxLTExOC45NEgxMzU5LjM0YzY4LjgxLDAsMTI0LjYxLDUzLjI1LDEyNC42MSwxMTguOTRsLjAxLDI3MjIuMTNDMTQ4My45NiwzMDUyLjExLDE0MjguMTYsMzEwNS4zNSwxMzU5LjM0LDMxMDUuMzVaIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0eWxlPSJmaWxsOiB2YXIoLS1ocC1jb2xvci05bmF6NWdCVi0yKTsiLz48L3N2Zz4=);" data-inner-natural-left="41.7" data-inner-natural-top="142.4" data-inner-natural-width="1445.2" data-inner-natural-height="2965.9"><iframe class="colorClassProxy"></iframe></div></div>

Answer 1

您可以在框架后面创建一个 div，将其缩小一点，以便边框位于手机边框的内部。然后把div的角弄圆，并给它overflow:hidden; 然后将图像放入其中，将其高度和宽度设置为 100%，并设置 object-fit:cover; 这是我的一个类似效果的网站，你可以参考一下。 参考（电话在中到大屏幕上可见）