小白技巧：大图片进行程序切图，页面加载更加流畅

Posted 2021-09-05 长安紫薯

需求

有张超大的图片，如果页面直接加载，时间长，加载慢
利用程序进行制定大小的切图，然后利用html网页将其拼接展现

难点

1）如何切图
2）生成html代码片段

代码实现

package util;

import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;
import java.awt.image.ImageFilter;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import javax.imageio.ImageIO;

import org.junit.Test;

/**
* @author 作者：nutony
* @email 邮箱：[e-mail]
* @version v.1.0 创建时间：21年8月12日 8:40:37
* @description 描述：
* 							cut() 切图
* 							1、对图片进行指定大小的切图
 * 							2、处理最后一行和最后一列，高度和宽度不足情况
 * 							3、生成html页面，去掉div间的空白 font-size:0px;
 * 							4、生成图片排序，方便再次合成
 * 							5、打印执行耗时
 * 
 * 							mergen() 合图
 * 							1、利用总高度和上一次高度，把合成的图贴入
*/
public class PictureUtil {

	/**
     * @param srcImageFile   源图像地址
     * @param descDir  			切片目标文件夹
     * @param destWidth      目标切片宽度
     * @param destHeight     目标切片高度
     */
    public static void cut(String srcImageFile, String descDir, int destWidth, int destHeight){
        try{
            // 输出为文件
        	descDir += System.nanoTime();		//防止目录存在被覆盖，每次都会产生新的目录
            File dir = new File(descDir+"//images"); 
            dir.mkdirs();
            String fileName = srcImageFile.substring(srcImageFile.lastIndexOf("//")+2, srcImageFile.lastIndexOf("."));
            
            // 读取源图像
            BufferedImage bi = ImageIO.read(new File(srcImageFile));
            // 源图宽度
            int srcWidth = bi.getWidth(); 
            // 源图高度
            int srcHeight = bi.getHeight(); 
            
            System.out.println("原图：" + srcImageFile);
            System.out.println("大小：宽=" + srcWidth + "，高=" + srcHeight);
            
            if (srcWidth >= destWidth && srcHeight >= destHeight){
                Image image = bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE_DEFAULT);
                int cols = 0;	 		// 切片横向数量
                int rows = 0; 	 	// 切片纵向数量
                
                // 计算切片的横向和纵向数量
                if (srcWidth % destWidth == 0){
                    cols = srcWidth / destWidth;
                }else{
                    cols = (int) Math.floor(srcWidth / destWidth) + 1;
                }
                if (srcHeight % destHeight == 0){
                    rows = srcHeight / destHeight;
                }else{
                    rows = (int) Math.floor(srcHeight / destHeight) + 1;
                }
                
                int realWidthArr[] = new int[cols];
                int realHeighArr[] = new int[rows];
     
                //处理最后一个宽和高不足的问题
                for(int j=0; j<cols; j++) {
                	realWidthArr[j] = destWidth;
                }
                realWidthArr[ realWidthArr.length-1 ] = srcWidth - destWidth*(realWidthArr.length-1);
                
                for(int i=0; i<rows; i++) {
                	realHeighArr[i] = destHeight;
                }
                realHeighArr[ realHeighArr.length-1 ] = srcHeight - destHeight*(realHeighArr.length-1);
                
                Image img;
                ImageFilter cropFilter;
                StringBuilder sb = new StringBuilder();
                
                //处理最后截图位置不够，如果截图，就被黑色填充
                // 循环建立切片
                sb.append("<div style=\\"font-size:0px;\\">\\n");
                for (int i = 0; i < rows; i++){
                	sb.append("<div>");
                    for (int j = 0; j < cols; j++){
                    	// 四个参数分别为图像起点坐标和宽高
                        cropFilter = new CropImageFilter(j * destWidth, i * destHeight, (j+1)* destWidth,  (i+1) * destHeight);
                        img = Toolkit.getDefaultToolkit().createImage( new FilteredImageSource(image.getSource(), cropFilter));
                        
                        BufferedImage tag = new BufferedImage(realWidthArr[j], realHeighArr[i], BufferedImage.TYPE_INT_RGB);
                        Graphics g = tag.getGraphics();
                        g.drawImage(img, 0, 0, null); // 绘制缩小后的图
                        g.dispose();
                        
                        //小技巧，排序问题10_会排在1_前面，可我们本意是1>10。利用都加100，101_<110_。这样获取目录下文件排序就不会乱掉了
                        ImageIO.write(tag, "JPEG", new File(descDir + "//images//"+ fileName + "_" + (i+1+100) + "_" + (j+1+100) + ".jpg"));
                        sb.append("<img src='images/"+ fileName + "_" + (i+1+100) + "_" + (j+1+100) + ".jpg'>");
                    }
                    sb.append("</div>\\n");
                }
                sb.append("</div>");
                
                //写html文件
                FileWriter writer = new FileWriter(descDir + "//"+ fileName +".html");
                writer.write(sb.toString());
                writer.close();
            }
        }catch (Exception e){
            e.printStackTrace();
        }
    }
    
    //指定目录，合并目录下所有图片
    public static void mergen(String dir, String descImg) throws IOException {
    	File f = new File(dir);
    	String[] imgs = f.list();
    	Arrays.sort(imgs);	//排序，图片顺序乱，拼接就乱套了
    	
    	for(int i=0; i<imgs.length; i++) {
    		imgs[i] = dir+"/"+imgs[i];	//拼接上路径
    	}
    	mergen(imgs, descImg);
    }
    
    //给定多个图片，直接合并
    public static void mergen(String[] imgs, String descImg ) throws IOException {
    	List<BufferedImage> biList = new ArrayList<BufferedImage>();
    	for(String img : imgs) {
    		BufferedImage bi = ImageIO.read(new File(img));
        	biList.add(bi);
    	}
    	
    	int width = biList.get(0).getWidth(); 
    	int totalHeight = 0;
    	for(BufferedImage bi : biList) {
    		totalHeight += bi.getHeight();	//计算出图片的总高度
    	}
    	
    	int oldHeight = 0;
    	
    	BufferedImage nbi = new BufferedImage(width, totalHeight,BufferedImage.TYPE_INT_RGB);
        Graphics g = nbi.createGraphics();
        for(int i=0; i<imgs.length; i++) {
        	g.drawImage(biList.get(i), 0, oldHeight, width, biList.get(i).getHeight(), null); 	// 绘制
        	oldHeight += biList.get(i).getHeight();	//技巧：记录上一次的累计高度
        }
        g.dispose();
        ImageIO.write(nbi, "JPEG", new File(descImg));
    }

    
    @Test
    public void testMergen() throws IOException {
    	//mergen("d://b-arc_1_1.jpg", "d://b-arc_2_1.jpg", "d://x.jpg");
    	//mergen(new String[]{"d://b-arc_1_1.jpg", "d://b-arc_2_1.jpg", "d://b-arc_3_1.jpg"}, "d://y.jpg");
    	mergen("D:\\\\b256559711043810\\\\images", "d://y.jpg");
    }
    
    @Test
	public void testCut() {
		long start = System.currentTimeMillis();
		cut("d://cgb.png", "d://b", 750, 200);
		System.out.println("切图完成，耗时：" + (System.currentTimeMillis() - start)/1000 +" s");
	}

}