如何将 *MULTIPLE* 图像分割成图块？ (JavaScript)

Question

我要分手多图像到图块（它必须是 div 或类似的）。 （使用 Javascript 或 jQuery。）

图像应该是一个在另一个下面。

它是我的分区；

<div class="reading-content">                                               
    <div class="page-break no-gaps">
        <img id="image-0" src="image.jpg" class="some-class">
    </div>
    <div class="page-break no-gaps">
        <img id="image-1" src="image1.jpg" class="some-class">
    </div>
</div>

示例 jsfiddle； http://jsfiddle.net/0Lxr2tad/

var t = Date.now();
var img = new Image();
var length = 30;
var ylength = 20;
img.onload = function() {
    var width = this.width,
        height = this.height,
        _length = -length,
        i, j;

    // create a <div/> with all basic characteristics, to be cloned over and over in the loops below.
    var $basicDiv = jQuery('<div/>', {
        class: 'splitImg',
        css: {
            'width': Math.floor(width/length),
            'height': Math.floor(height/ylength),
            'background-image': 'url(' + img.src + ')'
        }
    });
    // Finding a node in the DOM is slow. Do it once and assign the returned jQuery collection.
    // Also, #wrapper's width can be set here.
    var $wrapper = $('#wrapper').width(width + length * 2); 
    
    for (i = 0; i > _length; i--) {
        for (j = 0; j > _length; j--) {
            $basicDiv.clone().css({'background-position': `${width/length * j}px ${height/ylength * i}px`}).appendTo($wrapper);
        }
    }
    console.log(Date.now() - t);
}
img.src = 'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg'; // how to do multiple this??

任何人都可以帮忙吗？

Answer 1

我不太使用 jquery，所以我可以建议这样的 javascript 选项：

const targetElement = document.querySelector(...) // I choose the div that we are going to append newdivs 

我不知道它是否存在，但我假设有一组用于 src url 或任何其他数据的内容。

let arrayOfInfo = [{},{}] // this is a hypothetical array of objects that we will use  

arrayOfInfo.forEach(obj => {
let newDiv = document.createElement("div");
    newDiv.classList.add("page-break","no-gaps")
    newDiv.innerHTML=`<img id="image-${obj.index}" src=${obj.url} class="some-class">`
   
targetElement.append(newDiv);

})

所以用这种方法你可以自动化一切。如果你需要复用，你可以把它做成一个函数，在你需要的地方运行。如果您稍后需要更改某些内容，这也很方便，因此您只需更改数组值，其余的将再次自动。

我希望这是你需要的。

Answer 2

隔了很长时间又试了一次，昨天就可以了，任何人都可以使用。 （您可以删除 .splitImg { some style } 类以删除空格。）

JSFiddle Example

let i = 0;
let seenUrls = new Set()

setInterval(() => {

let url = document.querySelectorAll('#someid p img')[i].src;
let image = document.querySelectorAll('#someid p')[i]
let gor = document.querySelectorAll('#someid p')


if (!seenUrls.has(url)) {
seenUrls.add(url)

    var t = Date.now();
    var img = new Image();
    var length = 5;
    var ylength = 5;
    img.onload = function() {
        var width = this.width,
            height = this.height,
            _length = -length,
            i, j;

        // create a <div/> with all basic characteristics, to be cloned over and over in the loops below.
        var $basicDiv = jQuery('<div/>', {
            class: 'splitImg',
            css: {
                'width': Math.floor(width/length),
                'height': Math.floor(height/ylength),
                'background-image': 'url(' + img.src + ')'
            }
        });
        // Finding a node in the DOM is slow. Do it once and assign the returned jQuery collection.
        // Also, #wrapper's width can be set here.
        var $wrapper = image;
        image.style.width = width + length * 2 + "px";
        
        for (i = 0; i > _length; i--) {
            for (j = 0; j > _length; j--) {
                $basicDiv.clone().css({'background-position': `${width/length * j}px ${height/ylength * i}px`}).appendTo($wrapper);
            }
        }
        console.log(Date.now() - t);
    }
    img.src = url

    i = (i + 1) % gor.length;
    
}

}, 50)

#someid {
    max-width: 100%;
}

#someid p {
  display:flex;
  flex-wrap:wrap;
  margin: 0 auto;
}

#someid p img {
    display: none!important;
}

.splitImg {
  padding: 1px;
  background-clip: content-box;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="someid">
  <p>
  <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
  </p>
  <p>
  <img src="https://www.jqueryscript.net/images/Responsive-Touch-Friendly-jQuery-Gallery-Lightbox-Plugin-lightGallery.jpg" />
  </p>
</div>