Javascript 通过Javascript将图像切割成碎片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8912917/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cutting an Image into pieces through Javascript
提问by TheChes44
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?
我正在创建一个简单的拼图游戏。为了做到这一点，我需要将我正在使用的图片切成 20 块。Javascript 中有没有办法将图片切成 20 个相等的部分并将它们保存为网页中的 20 个不同对象？或者我只需要进入photoshop并自己剪下每张照片并调用它？
回答by Matt Greer
This is easy to do with Canvas. The general idea is:
使用 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];
}
回答by Diodeus - James MacFarlane
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.
您可以通过将图像设置为 div 上的背景，然后设置其背景位置来做到这一点。这与使用CSS Sprites基本相同。
(assume pieces are 100 x 100px)
（假设块是 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
}
回答by Matoeil
you can use the drawImage method to slice parts of a source image and draw them to a canvas:
您可以使用 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
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
something like :
就像是 ：
document.getElementById("vangogh").onclick=function()
{
draw();
};
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.drawImage(document.getElementById('source'),33,45);
}
then create draggable content for your new entities :
然后为您的新实体创建可拖动的内容：
<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>
