你的位置:首页 > Java教程

[Java教程]Java 图片处理——如何生成高清晰度而占有磁盘小的缩略图


现在的web项目,图片越来越多,图片大小也越来越大,随便就能达到1M,2M,甚至更大。用户上传的图片,一般是无法直接使用的。一般要生成两三种对应的缩略图,分别适配不同的终端,不同的场景。比如PC,手机,平板等等不同的终端;在比如图片列表和图片详情,肯定一个要使用缩略图,一个要使用高清图。

一般图片优化的第一个,就是在适当的地方使用缩略图。下面分析了Java中如何生成不同的缩略图的技术。

常见的图片格式有: ".*\\.(?i)(jpg|jpeg|gif|bmp|png)"

这其中有分为了两种,png 和 gif 是一种,其它格式是一种,因为 png 和 gif 存在透明度的问题,如果按照jpg一样处理,就会导致生成黑色背景的图片。

1. 指定的高度等比例 缩放图片:

  /**   * 按指定高度 等比例缩放图片   *   * @param imageFile   * @param newPath   * @param newWidth 新图的宽度   * @throws IOException   */  public static void zoomImageScale(File imageFile, String newPath, int newWidth) throws IOException {     if(!imageFile.canRead())       return;    BufferedImage bufferedImage = ImageIO.read(imageFile);    if (null == bufferedImage)       return;        int originalWidth = bufferedImage.getWidth();    int originalHeight = bufferedImage.getHeight();    double scale = (double)originalWidth / (double)newWidth;  // 缩放的比例        int width = newWidth;    int height = (int)(originalHeight / scale);    zooImageUtils(imageFile, newPath, bufferedImage, width, height);  }

  private static void zooImageUtils(File imageFile, String newPath, BufferedImage bufferedImage, int width, int height)      throws IOException{         String suffix = StringUtils.substringAfterLast(imageFile.getName(), ".");         // 处理 png 背景变黑的问题    if(suffix != null && (suffix.trim().toLowerCase().endsWith("png") || suffix.trim().toLowerCase().endsWith("gif"))){      BufferedImage to = null;      to = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);       Graphics2D g2d = to.createGraphics();       to = g2d.getDeviceConfiguration().createCompatibleImage(width,height, Transparency.TRANSLUCENT);       g2d.dispose();             g2d = to.createGraphics();       Image from = bufferedImage.getScaledInstance(width, height, Image.SCALE_AREA_AVERAGING);       g2d.drawImage(from, 0, 0, null);      g2d.dispose();             ImageIO.write(to, suffix, new File(newPath));    }else{      // 高质量压缩,其实对清晰度而言没有太多的帮助//      BufferedImage tag = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);//      tag.getGraphics().drawImage(bufferedImage, 0, 0, width, height, null);////      FileOutputStream out = new FileOutputStream(newPath);  // 将图片写入 newPath//      JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);//      JPEGEncodeParam jep = JPEGCodec.getDefaultJPEGEncodeParam(tag);//      jep.setQuality(1f, true);  //压缩质量, 1 是最高值//      encoder.encode(tag, jep);//      out.close();            BufferedImage newImage = null;      newImage = new BufferedImage(width, height, bufferedImage.getType());      Graphics g = newImage.getGraphics();      g.drawImage(bufferedImage, 0, 0, width, height, null);      g.dispose();      ImageIO.write(newImage, suffix, new File(newPath));    }  }

上面中 zoomImageScale可以指定生成图片的高度,然后宽度按照原始图的 高宽比 计算出新图片的宽度;同理也可以 指定生成图片的宽度,来等比例生成新图片。zooImageUtils 方法中涉及到了三种图片处理方法:

1)图片的按照指定高度,宽度 进行普通的重绘

      BufferedImage newImage = null;      newImage = new BufferedImage(width, height, bufferedImage.getType());      Graphics g = newImage.getGraphics();      g.drawImage(bufferedImage, 0, 0, width, height, null);      g.dispose();      ImageIO.write(newImage, suffix, new File(newPath));

2)利用JPEGImageEncoder生成所谓的“高质量”的图片

      // 高质量压缩,其实对清晰度而言没有太多的帮助//      BufferedImage tag = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);//      tag.getGraphics().drawImage(bufferedImage, 0, 0, width, height, null);////      FileOutputStream out = new FileOutputStream(newPath);  // 将图片写入 newPath//      JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);//      JPEGEncodeParam jep = JPEGCodec.getDefaultJPEGEncodeParam(tag);//      jep.setQuality(1f, true);  //压缩质量, 1 是最高值//      encoder.encode(tag, jep);//      out.close();

这种方法,其实仅仅是生成的图片所占硬盘更大而已,但是实际上,对图片的清晰度而已,没有实际的作用。

3)png 和 gif 图片不能采用上面说到的 图片处理方法,因为会导致生成的图片背景变成黑色,要另外处理(指定透明处理):

      BufferedImage to = null;      to = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);       Graphics2D g2d = to.createGraphics();       to = g2d.getDeviceConfiguration().createCompatibleImage(width,height, Transparency.TRANSLUCENT);       g2d.dispose();             g2d = to.createGraphics();       Image from = bufferedImage.getScaledInstance(width, height, Image.SCALE_AREA_AVERAGING);       g2d.drawImage(from, 0, 0, null);      g2d.dispose();             ImageIO.write(to, suffix, new File(newPath));

4)线性处理,本方法也不能处理 png 图片:

  /**   * 等比例改变图片尺寸   * @param nw 新图片的宽度   * @param oldImage 原图片   * @throws IOException   */  public static void constrainProportios2(int nw, String oldImage) throws IOException {    AffineTransform transform = new AffineTransform();    BufferedImage bis = ImageIO.read(new File(oldImage));    int w = bis.getWidth();    int h = bis.getHeight();    int nh = (nw * h) / w;    double sx = (double) nw / w;    double sy = (double) nh / h;    transform.setToScale(sx, sy);    AffineTransformOp ato = new AffineTransformOp(transform, null);    BufferedImage bid = new BufferedImage(nw, nh, BufferedImage.TYPE_3BYTE_BGR);    ato.filter(bis, bid);        String newPath = StringUtils.substringBeforeLast(oldImage,".")+"_3."+StringUtils.substringAfterLast(oldImage,".");    ImageIO.write(bid, "jpeg", new File(newPath));//    ImageIO.write(bid, "jpeg", response.getOutputStream());  }

上面有4中图片的生成方法,除了png需要另外处理之外,其它几种图片的处理方法,用实际生成的图片的清晰度比较而言,实际上是差别不大,基本没有明显的差别。实际的测试发现,如果要生成的图片和原始图片,在清晰度上要达到用肉眼不能明显区分它们的效果的话,关键的不是使用哪种图片生成方法,关键的是不要让生成的图片的 width 和 height 太小!这个才是关键,实际测试发现,生成的图片的 width 和 height 最好不要小于500,一定不要小于 400

2. 按照指定的高度和宽度生成图片:

  /**   * 按尺寸缩放图片   *   * @param imageFile   * @param newPath   * @param times   * @throws IOException   */  public static void zoomImage(File imageFile, String newPath, int width, int height) throws IOException {    if (imageFile != null && !imageFile.canRead())      return;    BufferedImage bufferedImage = ImageIO.read(imageFile);    if (null == bufferedImage)       return;    zooImageUtils(imageFile, newPath, bufferedImage, width, height);  }

这里没有按照原始图片的 高宽比来生成图片,而是按照指定的 高度和宽度来生成图片。一般而言,最好不要选择这种处理方法,因为图片会被压缩或者拉伸,图片会变得比较难看。

3. 实际效果比较:

1)原始图片:600 x 800, 220k

2) 按照指定高度等比例生成的图片,指定高度为448, 33.7k

3) 宽度和高度小于400的普通重绘的图片,224 x 300, 12.9k

4) 宽度和高度小于400的 JPEGImageEncoder生成所谓的“高质量”的图片,224 x 300, 63.4k

5)上面四种图片在网页中,按照同样的指定的图片CSS下面的表现:

img {  height: auto;  max-height: 300px;  max-width: 224px;  width: auto;}

可以比较明显的看出,第一张和第二张图片的清晰度是极其接近的,你甚至无法说出那张图片更加清晰;而第三张和第四种图片,从额前的头发而言,就明显的比第一张和第二张要查一些。

实际的图片分别为:

第一张:按照指定高度等比例生成的图片,指定高度为 448, 33.7k

第二张:原始图片:600 x 800, 220k

第三张:宽度和高度小于400的普通重绘的图片,224 x 300, 12.9k

第四张:宽度和高度小于400的 JPEGImageEncoder生成所谓的“高质量”的图片,224 x 300, 63.4k

结论

生成的图片的清晰度,主要取决于生成的图片的大小,而不是取决于图片生成的算法;

如果要想达到肉眼无法分别的效果,生成图片的高宽最好不要小于500,一定不要小于400;

-----

第四张图片达到了63.4K,但是清晰度明显差于第一张大小只有33.7K的图片。图片的宽度和高度的大小才是清晰度的决定因数。

第三张图片只有 12.9K,而清晰度和第四张63.4K的图片清晰度几乎一样,因为它们的尺寸是一样的,都是224 x 300,尽管生成图片的算法不一样。