Image slicing for Jalousie Effect - not working

Tutorials of (Image slicing for jalousie effect - not working) by Robert wildling

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Image slicing for Jalousie Effect - not working</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="myImageElementInTheDom">
  
</div>
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#myImageElementInTheDom {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid red;
  width: 100vw;
  height: 70vh;
}
/* Downloaded from https://www.codeseek.co/ */
window.onload = function() {
  var image = new Image();
  image.onload = cutImageUp;
  image.src = 'http://placekitten.com/g/1000/300';

  function cutImageUp() {
    var imagePieces = [];
    var numColsToCut = 10;
    var numRowsToCut = 10;
    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());
      }
    }

    // imagePieces now contains data urls of all the pieces of the image

    // load one piece onto the page
    var anImageElement = document.getElementById('myImageElementInTheDom');
    anImageElement.src = imagePieces[0];
  }
}

This awesome code ( Image slicing for Jalousie Effect - not working ) is write by Robert Wildling, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Robert Wildling