Вырезание изображения на куски через Javascript

Я создаю простую головоломку. Чтобы сделать это, мне нужно вырезать картинку, которую я использую, на 20 штук. Есть ли способ в Javascript разрезать изображение на 20 равных частей и сохранить их как 20 разных объектов на веб-странице? Или мне просто нужно пойти в Photoshop и вырезать каждую картинку и называть ее?

Ответ 1

Вы можете сделать это, установив изображение в качестве фона на div, а затем установите его фоновое положение. Это в основном то же самое, что с помощью CSS Sprites.

(предположим, что куски 100 х 100 пикселей)

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

Ответ 2

Это легко сделать с Canvas. Общая идея:

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

Ответ 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/