Cortando una imagen en pedazos a través de Javascript

Question

Estoy creando un rompecabezas simple. Para hacer esto, necesito cortar la imagen que estoy usando en 20 pedazos. ¿Hay alguna manera en Javascript de cortar una imagen en 20 piezas iguales y guardarlas como 20 objetos diferentes dentro de la página web? ¿O simplemente tengo que ir al photoshop y cortar cada imagen yo mismo y llamarla?

Answer 1

Puede hacer esto configurando la imagen como fondo en un div, luego configurando su posición de fondo. Esto es básicamente lo mismo que usar CSS Sprites.

(asumir piezas son 100 x 100 px)

<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 
} 

Answer 2

Esto es fácil de hacer con lienzo. La idea general es:

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

Answer 3

se puede utilizar el método drawImage para cortar piezas de una imagen de origen y atraerlos a un lienzo:

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

algo como:

document.getElementById("vangogh").onclick=function() 
    { 
    draw(); 
    }; 

function draw() { 
    var ctx = document.getElementById('canvas').getContext('2d'); 
    ctx.drawImage(document.getElementById('source'),33,45); 
       } 

luego cree contenido arrastrable para sus nuevas entidades:

<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> 

http://www.html5rocks.com/en/tutorials/dnd/basics/