JSFiddle - React, Tailwind, and code Playground

by nithyanandam venu

HTML

<div id="canvas">

</div>

CSS

#myImageElementInTheDom{
  width:250px;
  height:250px;
  border:1px solid black;
}

JavaScript

var image = new Image();
image.onload = cutImageUp;
image.setAttribute('crossOrigin', 'anonymous');
image.src = 'http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg';



function cutImageUp() {
	var numColsToCut=30;
var numRowsToCut=10;
var widthOfOnePiece=250;
var heightOfOnePiece=100;
    var imagePieces = [];
    for(var x = 0; x < numColsToCut; ++x) {
        for(var y = 0; y < numRowsToCut; ++y) {
            var canvas = document.createElement('canvas');
            canvas.width = widthOfOnePiece;
            canvas.height = heightOfOnePiece;
            var context = canvas.getContext('2d');
            context.drawImage(image, x * widthOfOnePiece, y * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
            imagePieces.push(canvas.toDataURL());
        }
    }
		
    var imgStr='';
    // imagePieces now contains data urls of all the pieces of the image
		for(var i=0;i<imagePieces.length;i++){
    	imgStr+='<img src="'+imagePieces[i]+'"></img>';
    }
    
    
    // load one piece onto the page
      $('#canvas').append(imgStr);
 
}