将图像分成多个部分而不会多次加载图像 [英] Mask image into multiple portions without loading image multiple times

问题描述

我想拍摄一张图像并将其拆分为多个独立的部分。我需要能够在不加载图像的情况下多次执行此操作，因为在一定数量的部分之后这将带来很多带宽。为了这个问题，我想将图像分成4个象限，但理想情况下它可以扩展。

I would like to take an image and split it into multiple self-contained "portions". I need to be able to do this without loading the image multiple times because after a certain number of portions this will be a lot of bandwidth. For the sake of this question I would like to split an image into 4 quadrants but ideally it will be scalable.

请注意，不仅有一个白色的窗框覆盖，右上象限从左上角的左边开始。

Notice how there isn't just a white "window frame" overlay, the top-right quadrant starts where the top-left left off.

这是我制作的小提琴，它完成了我想要的东西，除了它必须加载所有4个象限的图像。
https://jsfiddle.net/gm4os1Ld/

Here is a fiddle I made that accomplishes what I want except it has to load the image for all 4 quadrants. https://jsfiddle.net/gm4os1Ld/

#first{
  position:absolute;
  clip: rect(0, 217px, 159px, 0);
}

#second{
  position:absolute;
  left: 20px;
  clip: rect(0px,435px,159px,217px);
}
#third{
  position:absolute;
  top: 20px;
  clip: rect(159px, 217px, 318px, 0);
}
#fourth{
  position:absolute;
  left: 20px;
  top: 20px;
  clip: rect(159px,435px,318px,217px);
}

仅使用一次图像加载是否可以做到这一点？ CSS或Jquery解决方案没问题。

Is it possible to do that with just one image load? CSS or Jquery solutions are fine.

推荐答案

来自之前的评论

如何在CSS后台位置设置图像？它会是一个益智游戏吗？ http://codepen.io/gc-nomade/pen/JRAdOm （使用了一些flex和移动每个可见部分的动画）你的脚本只需要切换一个类名（比背景图像更容易）

what about setting image in CSS background-position ? would it be for a puzzle game ? http://codepen.io/gc-nomade/pen/JRAdOm (used some flex and animation to move each visible parts around) your script will have to switch a class name (easier than just background-image) only once

---

您可以使用 background-position ，而optionnaly background-size 和一些动画来移动每个部分。
（灵感来自旧的代码集 http://codepen.io/gc -nomade / pen / kFGya / ）

---

You may use background-position, and optionnaly background-size and some animation to move each parts around. (inspired from an older codepen http://codepen.io/gc-nomade/pen/kFGya/ )

#mybox {
  width:456px;
  display:flex;
  flex-wrap:wrap;
}
.splitImg {
  padding: 5px;
  background: url(http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg) no-repeat;
  height: 159px;
  width: 218px;animation : reorder 5s infinite alternate ;
  background-clip: content-box;
  background-size:195%;
}
#first {
  background-position:5px 5px;
}
#second {
  background-position:-213px 5px;
  animation-delay:1.25s
}
#third {
  background-position:5px -154px;
  animation-delay:2.5s
}
#fourth{
  background-position:-213px -154px;
  animation-delay:3.75s
}
@keyframes reorder {
  from {
    order:1;
  }
  25% {
    order:2
  }
  50% {
    order:3
  }
  75% {order:4;
  }
  to {
    order:1;
  }
}

<div id="mybox">
  <div id="first" class="splitImg"></div>
  <div id="second" class="splitImg"></div>
  <div id="third" class="splitImg"></div>
  <div id="fourth" class="splitImg"></div>
</div>

这篇关于将图像分成多个部分而不会多次加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！