Javascriptで画像を切り抜く

Question

私は単純なジグソーパズルを作成しています。これを行うには、私は20枚の画像を切り取る必要があります。 Javascriptで画像を20個の等しい部分にカットし、それらをWebページ内の20個の異なるオブジェクトとして保存する方法はありますか？または、私はちょうどフォトショップに行って、それぞれの写真をカットしてそれを呼び出す必要がありますか？

Answer 1

これは、画像をdivの背景として設定し、背景の位置を設定することで可能です。これは基本的にはCSS Spritesと同じです。

（仮定の作品は100×100pxにしている）

​​3210

CSS：

.puzzle { 
    background-image:url(/images/puzzle.jpg); 
    width:100px; 
    height:100px; 
} 

.piece1 { 
    background-position:0 0 
} 

.piece2 { 
    background-position:-100px -100px 
} 

Answer 2

これは、キャンバスで行うのは簡単です。一般的な考え方は次のとおりです。

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

あなたは元画像の部分をスライスし、キャンバスにそれらを描画するためにdrawImageメソッドを使用することができます。

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

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

のようなもの：

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

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

新しいエンティティにドラッグ可能なコンテンツを作成：

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