通过Javascript将图像剪切成小块 [英] Cutting an Image into pieces through Javascript

问题描述

我正在创建一个简单的拼图游戏。为了做到这一点，我需要将我使用的图片剪成20片。有没有一种方法在JavaScript中将图片剪切成20个相同的片段并将它们保存为网页中的20个不同的对象？或者我只需要进入photoshop并自己剪切每张图片并将其调出来？

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?

推荐答案

您可以通过将图像设置为div上的背景，然后设置其背景位置。这与使用 CSS Sprites 基本相同。

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.

（假设件数为100 x 100px）

(assume pieces are 100 x 100px)

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

CSS：

CSS:

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

.piece1 {
   background-position:0 0
}

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

这篇关于通过Javascript将图像剪切成小块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！