Image Split Grid

by Craig Martin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<input type="file" id="spimg" value=""/><button onclick="spliT(3)">9 Grid Split</button><button onclick="spliT(2)">4 Grid Split</button>

<button id="download-btn">Download All Images</button>

<div id="wrappergrid"></div>

    <div id="output_cont">
      <img style="display:none;" id="output">
    </div>

CSS

#wrappergrid {
  display:flex;
  flex-wrap:wrap; 
}
.splitImg {
  padding: 1px;
  background-clip: content-box;
  background-repeat: no-repeat;
}

JavaScript

const status = document.getElementById('status');
      const output = document.getElementById('output');
      if (window.FileList && window.File && window.FileReader) {
        document.getElementById('spimg').addEventListener('change', event => {
          output.src = '';
          const file = event.target.files[0];
          if (!file.type) {
            //status.textContent = 'Error: The File.type property does not appear to be supported on this browser.';
            return;
          }
          if (!file.type.match('image.*')) {
            //status.textContent = 'Error: The selected file does not appear to be an image.'
            return;
          }
          const reader = new FileReader();
          reader.addEventListener('load', event => {
            output.src = event.target.result;
          });
          reader.readAsDataURL(file);
        }); 
      }

    


var element = $(".splitImg"); // global variable
var getCanvas; // global variable

    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#wrappergrid").append(canvas);                
                getCanvas = canvas;
             }
         });
    });



function spliT(gridsize){


$('#wrappergrid').html("");

imgURL=output.src;
	var length = gridsize;
	var ylength = gridsize;
	var width = document.getElementById("output").width,
			height = document.getElementById("output").height,
			_length = -length,
			i, j;

		var $basicDiv = jQuery('<div/>', {
			class: 'splitImg',
			css: {
				'width': Math.floor(width/length),
				'height': Math.floor(height/ylength),
        'background-image': 'url(' +output.src + ')'

			}
		});

		var wrappergrid = $('#wrappergrid').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(wrappergrid);
			}
		}
...