Question

我正在制作一个简单的工具，用于将图像和视频从一个长宽比转换为另一个选定的长宽比。
我的第一次尝试是使用相同的img标签两次：
1st：不透明度0.5
第二：我计算并应用了剪切路径。（这样一来，用户可以看到整个图像，裁剪后将看到哪个矩形。）

除了坏习惯，即两次加载同一张图片，我还需要对视频进行此操作。两次播放相同的视频会使事情真的超负荷，我真的想避免这种情况（除了要确保两者都播放同一帧，在同一时刻暂停/播放等整个问题之外）。

我已经阅读了一些有关SVG的知识，以及如何使用它们。 SVG似乎是正确使用的工具。我只需要支持最新的浏览器版本，因此不需要IE 8。

更复杂的是，图像引导4响应，并且图像和视频具有不同的宽高比（并且可能会旋转），因此SVG上固定的宽度/高度将不起作用。

例如，我有一张图片。
长宽比为4：1。
用户希望将其转换为1：1。
然后，我计算出裁剪因子为inset（0％33.33％）（需要进行2/3，并且我想使其居中）。
对于此示例，SVG需要为图像的100％。各处都是白色，除了左侧的一个黑色矩形和右侧的一个黑色矩形都具有33％的高度和100％的宽度。
（如果文本没有意义，请参见下面的代码段）

我从没真正使用过SVG，所以有点困惑。我需要使其内联，因为我需要使用javascript更改4个正方形的宽度和高度，而到目前为止我的尝试还没有到位。

对于这个确切的示例，使用SVG一次使用图像并使用4个正方形（2个为0宽度/高度，两个为33.33％/ 100％）遮罩的示例就足够了，我将能够添加用于控制正方形大小的JS。

这是我现在要进行的工作的本质/方式：

.overlay-image {
    height: 100%;
    position: absolute;
    margin-left: -8px;
    margin-top: -3px;
    opacity: 0.5;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="col mx-auto" >
  <div class="row h-100" style="background: #ff0000;">
    <div class="row h-100"style="background: #00ff00;">
       <div class="mx-auto my-auto col-6"style="background: #0000ff;">
          <img src="https://upload.wikimedia.org/wikipedia/commons/5/57/UNICEF_Logo.png" class="img-responsive fit-image img-fluid overlay-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/5/57/UNICEF_Logo.png" class="img-responsive fit-image img-fluid " style="clip-path: inset(0% 33.33%);">
      </div>
   </div>
  </div>
</div>

修改这是我要寻找的方向的一步。进行遮罩我在上面用两个图像而不是SVG进行伪装。我意识到我选择显示的图像不是很好，只是选择了一个带有CC许可的相当小的图像。

根据以下代码段，我在寻找答案的内容：

使图像填充包含div的宽度，并具有所需的高度以不破坏图像的宽高比，并缩放SVG以包含其内容。
使用引导程序将图像水平和垂直居中
关于图像的width和height属性的任何想法，如果我应该将其设置为100 100，并通过固定第一点而不必考虑它，或者是某些东西（以及遮罩矩形），则需要根据图像尺寸和纵横比进行调整

希望这使我的问题更清楚。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="col mx-auto" >
  <div class="row" style="background: #ff0000;">
    <div class="row "style="background: #00ff00;">
       <div class="mx-auto my-auto col-6"style="background: #0000ff;">
        <svg viewBox="0 0 100 100"  style="outline: 1px solid red" class="  ">  
          <defs>  
            <mask id="image-mask" x="0" y="0" width="100" height="50">  
              <rect x="0" y="0" width="100" height="50" fill="#00F0FF" />
              <rect x="33" y="0" width="33" height="50" fill="white" />
            </mask>  
          </defs>
          <image width="100" height="50" preserveAspectRatio="xMidYMid meet" class=" "  xlink:href="https://upload.wikimedia.org/wikipedia/commons/5/57/UNICEF_Logo.png" mask="url(#image-mask)" />  
        </svg>

      </div>
   </div>
  </div>
</div>

使用内嵌SVG遮罩图像或视频

0 个答案: