Split Image

by Craig Martin

HTML

<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>



<div id="mydiv"><img src="https://cdn.shopify.com/s/files/1/0647/4927/3302/files/b4aeani.jpg?v=1665448691"/></div>

CSS

div {
    width: 290px;
    height:290px;
    max-height:100%;
    
    position: relative;
}

.tile { 
    float: left;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -ms-transition: all .1s linear;
    -o-transition: all .1s linear;
}

JavaScript

html2canvas(document.querySelector("#myDiv")).then(canvas
 {    
    document.body.appendChild(canvas)
 });





















;(function( $, window ) {

  var _defaults = {
    x : 3, // tiles in x axis
    y : 3, // tiles in y axis
    gap: 2
  };

  $.fn.splitInTiles = function( options ) {

    var o = $.extend( {}, _defaults, options );

    return this.each(function() {

      var $container = $(this),
          width = $container.width(),
          height = $container.height(),
          $img = $container.find('img'),
          n_tiles = o.x * o.y,
          wraps = [], $wraps;

      for ( var i = 0; i < n_tiles; i++ ) {
        wraps.push('<div class="tile"/>');
      }

      $wraps = $( wraps.join('') );

      // Hide original image and insert tiles in DOM
      $img.hide().after( $wraps );

      // Set background
      $wraps.css({
        width: (width / o.x) - o.gap,
        height: (height / o.y) - o.gap,
        marginBottom: o.gap +'px',
        marginRight: o.gap +'px',
        backgroundImage: 'url('+ $img.attr('src') +')'
      });
      
      // Adjust position
      $wraps.each(function() {
        var pos = $(this).position();
        $(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
      });

    });

  };

}( jQuery, window ));

$('div').splitInTiles();