GIMP004：GIMP如何分割图片和切片保存成网页文件

在图像处理中，我们常常会遇到切割图像的时候，大家都知道了如何在Photoshop（也就是PS）里切割图片和用切片保存文件的步骤，这里我们用开源免费的和PS一样专业的图像处理软件GIMP来实现这两种需求。

回想一下在PS里，我们要切片分割，往往需要借助参考线。而在GIMP里同样需要借助参考线来完成对图像的区域划分。而拉出参考线来划分图像区域的方法和PS里一样，首先我们在一个编辑的图像界面上，左侧和上边都有标尺，光标移动到上面标尺上按住鼠标左键拉下来，就创建了一个上下分割的参考线，所以左右分割同理可证，从左边标尺上拉出来即可。

在图像上创建好了参考线，接下来就开始分割图像和做切片。当然这里一人客其实讲的是两个知识点：一个是在GIMP中如何切割图片成小图片；另一个是如何使用切片工具来把图片保存成网页表格文件。而这个网页表格文件，意义和PS里切片一样，都是把素材图片切割，然后创建HTML文件让图像在网页表格文件里正确显示。

先说第一个知识点，GIMP如何把一张大图分割成几个小图分别保存。这个功能很简单。首先在创建好参考线，也就是你想把这张图分割成哪几张小图，然后在GIMP菜单栏的图像里找到子菜单：Slice Using Guides。然后GIMP就自动沿着你创建好的参考线把素材图片切割成了多个子图片，并且分别自动打开了。接下来你是保存还是编辑就看你自己了。

第二个知识点，则是我们常在PS里用到的很熟悉的切片工具，也就是把一张图片切片成多个小图并加上若干代码保存成能正确显示的HTML表格片段的网页文件，以下两个对比图，大家一看就明白了切片的实际效果。

而要实现这个功能也很简单，和PS里的切片一样，在以前的文章里一人客也介绍过，免费作图软件GIMP的切片在滤镜菜单里的网页子菜单里。首先，在GIMP图像显示区域的标尺上分别拉出待切割的参考线，然后选择滤镜-网络-切片。

打开一个标题为Pytho-fu-slice的属性界面。在这里我们可以选择把我们HTML文件保存到哪个文件夹里，导出的文件名是什么，图像格式是什么，是否要单独的图像文件夹（如果默认否，则生成的子图像和HTML在一个文件夹里），设置图像导出的文件夹，设置表格元素的空间，用于鼠标悬停及点击的JavaScript，是否跳过表头动画。

这些设置一一设置后，点击确定则可以自动生成HTML文件，我们在浏览器里打开则显示出完整的图片，而在源文件里，我们可以看出这些设置的代码。代码其实就是通过HTML标记语言的table标签和JavaScript脚本来搭建一个显示完整原图片的表格。而这里JavaScript脚本的意义就在于我们在GIMP里设置的“用于鼠标悬停及点击的JavaScript”和“是否跳过表头动画”选项。当然这里有一些冗余代码，我们可以根据情况修改和调整。