javascript - 如何在不流过帧的情况下在帧图像内渲染屏幕截图/图像？-6ren

javascript - 如何在不流过帧的情况下在帧图像内渲染屏幕截图/图像？

转载作者：技术小花猫更新时间：2023-10-29 12:15:29

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

屏幕截图 1 展示了一张紧贴在框架内的图像。屏幕截图 2 显示了超出帧的图像。

第一个挑战是图像/屏幕截图的纵横比可能会有所不同，即可能会使用不同大小的图像。例如，一个图像可能是 1242x2688，而另一个图像可能是 1440x2960。无论纵横比如何，屏幕截图都应填满整个框架，但不会溢出其边缘。

第二个挑战是它们通常在 CSS 中使用 transform: scale(x) 进行缩放。到 ~25%，并且浏览器的舍入行为会在此比例下产生像素大小的差距。然而，当比例恢复到 100% 时，这些差距就会消失。

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

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

选项 1:填充值

我们使用“填充”值来调整子 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>

最佳答案

其他答案
在我提供我自己的来源方法之前，我将首先讨论来自 Ron Royston 的答案。并显示可能的问题/颠簸。
Ron Royston's answer
您已经指出了这种方法的问题:

this doesn't work because if the frame has rounded corners like this one, the screenshot can still peek through depending on the background-size

kthornbloom 提供了一种可能的解决方案:

So add border-radius to the image element if it needs rounded corners, right?

对!但这仅适用于某些图像。看，你不能申请 border-radius仅到 background-image .相反，您必须对容器本身执行此操作。
那么，这有什么问题呢？只需添加一个足够小的 border-radius所以它不会剪切图像，缩放 background-image下来，你准备好了，对吧？
并不真地! 您必须决定如何处理背景图像的大小。你可以缩小它，但你不能使用 cover或类似 background-size 的东西.除非您的图像完全适合智能手机图像的边框，否则您会遇到麻烦。另外， border-radius如果您缩小背景图像，因为它不再接触边界，则已过时。

  .colorClassProxy {
  display: none
}

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

.itemBox {
  background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
  border-radius: 15px;
  background-size: 95% 95%;
  background-repeat: no-repeat;
  background-position: center;
}

.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="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>

看起来不好吗？
然而，这种做法在某些情况下工作。如果智能手机的轮廓侧面没有任何按钮(就像这个一样) 这种方法行得通 .但我想不出侧面没有按钮的智能手机。
Никита Гулис's answer (在职的)
由于缺少标记，这个答案是 很难读 .然而，它是 大部分 大多数时候都是正确和最好的方式。实际上，您几乎已经使用剪切路径自己完成了。但首先让我们做这些步骤。

创建一个图像并将其放置在容器内。

将其缩小到合适的尺寸。

以正确的方式放置它。

删除剪切路径，因为它是不必要的。

/*====Added this part====*/
.display-image {
  width: 165px;
  height: 340px;
  display: block;
  background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"');
  background-size: cover;
  margin-top: 15px;
  margin-left: 5px;
  border-radius: 10px;
}
/*=======================*/


.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;">

  <!--====Added this line====-->
  <div class="display-image" alt=""></div>
  <!--=======================-->
  
  <!--====Removed the clipping path====-->
  <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>

简短说明:他提供的引用资料实际上并不代表他所写的内容。
我看了一下你开赏金的原因:

Looking for an answer drawing from credible and/or official sources.

您可以在每个使用图像作为智能手机的网站上看到它。

栈溢出已经讨论过一次对here .

我创建了一个带有“网站到应用程序”转换器的测试应用程序。在这个网站上，您可以测试该应用程序，他们使用相同的方法。唯一的区别是它们不能有图像作为显示。相反，他们使用 Canvas 。遗憾的是我无法在我的答案中实现它，所以我必须发布 the link反而。

同样可以在 this 上看到地点。

我提供的例子都是相当大的公司，如果你搜索更多的例子，你会发现更多。在我看来，这些例子使这种方法变得可信。
编辑
根据评论，我将完成答案。
这取决于您可以编辑图片的程度。我假设您拥有这些图片或被允许使用它们。这是一种方法:
首先，我认为我可以定位它并缩放图像。原来图像中的智能手机略微转动。因此，一种方法是为此使用 CSS。您将不得不与 skew() 一起工作(CSS)，但这非常、非常、非常难以确定。此外，如果您只是将它放在图像上，您将遇到与之前剪切路径相同的问题。所以这似乎不是解决方案。
另一种方法如下:
您只需将其转换为 PNG(可移植网络图形)并切出白色显示以使其透明应该没问题。

将您想要的图像放在较低的显示中 z-index .

定位并缩放它。

然而，这是 仅大约 .你当然可以只是 skew和 transform直到没有人注意到图像。但这似乎不是“最清晰”的方式吗？

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.display-image {
  width: 184px;
  height: 322px;
  display: block;
  background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"');
  background-size: cover;
  top: 165px;
  left: 219px;
  position: absolute;
  transform: rotate(0.2deg);
  z-index: -1;
}

.itemBox {
  position: relative;
  box-sizing: border-box;
}

.frameBox {
  z-index: 1;
}

<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;">

  <!--====Added this line====-->
  <div class="display-image" alt=""></div>
  <!--=======================-->

  <!--====Removed the clipping path====-->
  <div class="frameBox"><img alt="" src="https://i.imgur.com/jbHkPuf.png"></div>
</div>

我能想到的唯一干净的方法是使用 canvas .如您所见 here可以根据自己的喜好使用它来扭曲图像。您必须在 canvas 中绘制整个“智能手机内手”图片。然后在需要的坐标上绘制应该在显示器上的图像。但是您必须决定是否值得花时间，因为它相当耗时、复杂且代码很多。我决定它不是，这就是为什么没有工作的例子。此外，您不能只使用 background-size: cover 之类的东西。因此，如果您不想编写大量 JS 垃圾，则必须将图像裁剪为智能手机大小。在我看来，之前的方法是最好的方法。
当然，我可能忽略了一些东西，所以请随时纠正我或编辑我的答案。

关于javascript - 如何在不流过帧的情况下在帧图像内渲染屏幕截图/图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56088669/