Cutting an Image into pieces through Javascript
I am creating a simple Jigsaw puzzle. In order to do this, I need to cut the picture I am using into 20 pieces. Is there a way in Javascript to cut a picture into 20 equal pieces and save them as 20 different objects within the webpage? Or do I just have to go into photoshop and cut each picture out myself and call it in?
This is easy to do with Canvas. The general idea is:
var image = new Image();
image.onload = cutImageUp;
image.src="https://stackoverflow.com/questions/8912917/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];
}
You can do this by setting the image as a background on a div, then setting its background-position. This is basically the same as using CSS Sprites.
(assume pieces are 100 x 100px)
<div class="puzzle piece1"></div>
<div class="puzzle piece2"></div>
CSS:
.puzzle {
background-image:url(/images/puzzle.jpg);
width:100px;
height:100px;
}
.piece1 {
background-position:0 0
}
.piece2 {
background-position:-100px -100px
}
you can use the drawImage method to slice parts of a source image and draw them to a canvas:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
something like :
document.getElementById("vangogh").onclick=function()
{
draw();
};
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.drawImage(document.getElementById('source'),33,45);
}
then create draggable content for your new entities :
<div id="columns">
<div class="column" draggable="true"><header>A</header></div>
<div class="column" draggable="true"><header>B</header></div>
<div class="column" draggable="true"><header>C</header></div>
</div>
