javascript 如何使用javascript从图像创建拼图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4067566/
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
How to create jigsaw puzzle from an image using javascript
提问by mdikici
I googled it but didn't find a good answer. Specifically, I want to learn:
我用谷歌搜索，但没有找到好的答案。具体来说，我想学习：
- to slice an image into curved pieces
- to create individual objects from those pieces (i assume that i need this to reassemble)
- 将图像切成弯曲的部分
- 从这些部分创建单个对象（我假设我需要重新组装）
thanks.
谢谢。
回答by Vilx-
There are several pieces to this puzzle. :)
这个谜题有几个部分。:)
The first piece is SVG and its Canvas. That's what you'll need to draw, because otherwise you can't make a curved piece out of a picture. Only rectangles are possible with standard HTML/CSS.
第一部分是 SVG 及其 Canvas。这就是您需要绘制的内容，否则您无法从图片中制作出弯曲的部分。标准 HTML/CSS 只能使用矩形。
The second piece is an algorithm for generating jigsaw pieces from the picture. Google should help you with that if you can't figure one out by yourself (though it doesn't seem very complicated).
第二部分是从图片中生成拼图的算法。如果您自己无法解决这个问题，Google 应该会帮助您（尽管它看起来并不复杂）。
The rest should be straightforward.
其余的应该很简单。
Added:A quick Google searchgave just such a jigsaw enginein the first result. Check out the source of that.
回答by Marko
I'll assume the image you want to saw to pieces is a raster image with a resolution that you will use for the puzzle pieces, call that /picture/. Also, I assume you have the edges along which you wish to saw in a second raster image with the same dimensions, call that /raster/. Then your problem amounts to determining all connected areas in the raster. Each pixel of the raster gets annotated with the id of the jigsaw piece it belongs to, initially 'none', -1 or whatever. Then your algorithm scans across all pixels in the raster, skipping pixels that already belong to a piece. For each unassigned piece it executes a flood fill, "coloring" the pixels with the pieces id (e.g. number). In a second scan, after allocating an image for each piece, you add the corresponding pixels of the image to the piece. As part of your first pass you can maintain for each piece id the bounding box. That allows you to allocate the the images for the pieces to their proper dimensions.
我将假设您想看到的图像是一个光栅图像，其分辨率将用于拼图，称为 /picture/。另外，我假设您希望在具有相同尺寸的第二个光栅图像中看到边缘，称为 /raster/。那么您的问题相当于确定栅格中的所有连接区域。光栅的每个像素都用它所属的拼图块的 id 进行注释，最初是“无”、-1 或其他任何东西。然后你的算法扫描光栅中的所有像素，跳过已经属于一块的像素。对于每个未分配的块，它执行泛洪填充，用块 id（例如数字）“着色”像素。在第二次扫描中，在为每个片段分配图像后，将图像的相应像素添加到片段中。作为您第一次通过的一部分，您可以为每个部件维护边界框。这允许您将碎片的图像分配到适当的尺寸。
You need a suitable convention to deal with border pixels: e.g. border pixels to the right belong to the piece if they have the same x-position, but are above they also belong to the piece.
您需要一个合适的约定来处理边界像素：例如，如果右侧的边界像素具有相同的 x 位置，则它们属于该块，但在其上方它们也属于该块。
