Untitled

Cutting an Image into pieces through Javascript

<div class="puzzle piece1"></div>

<div class="puzzle piece2"></div>

       

.puzzle {

   background-image:url(/images/puzzle.jpg);

   width:100px;

   height:100px;

}

 

.piece1 {

   background-position:0 0

}

 

.piece2 {

   background-position:-100px -100px

}

       

var image = new Image();

image.onload = cutImageUp;

image.src = 'myimage.png';

 

function cutImageUp() {

    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());

        }

    }

 

    // 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];

}