我正在创建一个简单的拼图游戏。为了做到这一点，我需要将我正在使用的图片切成 20 块。Javascript 中有没有办法将图片切成 20 个相等的部分并将它们保存为网页中的 20 个不同对象？或者我只需要进入Photoshop并自己剪下每张照片并调用它？
通过Javascript将图像切割成碎片
IT技术
javascript
html
2021-02-26 21:17:51
3个回答
使用 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];
}
您可以通过将图像设置为 div 上的背景，然后设置其背景位置来做到这一点。这与使用CSS Sprites基本相同。
（假设块是 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
}
您可以使用 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>