我是一个前端工程师，最近在项目中遇到了一个问题：需要将javaexcel中的图片导出并进行压缩后展示在前端页面中。经过一番调研和实践，我终于将这个问题解决了。在这里，我将分享我的经验和思路。

1. Javaexcel导出图片

首先，我们需要在后端（java）将excel表格中的图片导出。为了实现这个功能，我使用了poi和apache.commons.io这两个库。具体代码如下：

Workbook workbook = new XSSFWorkbook();
Sheet sheet = workbook.createSheet("Sheet1");
// 创建一个图片
InputStream inputStream = new FileInputStream("path_to_image");
byte[] bytes = IOUtils.toByteArray(inputStream);
int pictureIdx = workbook.addPicture(bytes, Workbook.PICTURE_TYPE_JPEG);
CreationHelper helper = workbook.getCreationHelper();
Drawing drawing = sheet.createDrawingPatriarch();
ClientAnchor anchor = helper.createClientAnchor();
anchor.setCol1(0);
anchor.setRow1(0);
Picture picture = drawing.createPicture(anchor, pictureIdx);

通过addPicture方法将图片数据读取，并将图片插入到workbook中。

2. 图片压缩

由于excel表格中的图片可能较大，如果直接在前端展示，会消耗较多的资源。所以我们需要对图片进行压缩，减小其大小。我使用了javax.imageio.ImageIO和java.awt.Image这两个库来实现图像压缩。以下是具体的代码实现：

private static BufferedImage resizeImage(BufferedImage originalImage, int targetWidth, int targetHeight) throws IOException {
  double ratio = (double) targetWidth / originalImage.getWidth();
  int height = (int) (originalImage.getHeight() * ratio);
  if (height > targetHeight) {
    ratio = (double) targetHeight / originalImage.getHeight();
    int width = (int) (originalImage.getWidth() * ratio);
    return resize(originalImage, width, targetHeight);
  }
  return resize(originalImage, targetWidth, height);
}
private static BufferedImage resize(BufferedImage originalImage, int width, int height) throws IOException {
  Image resultingImage = originalImage.getScaledInstance(width, height, Image.SCALE_DEFAULT);
  BufferedImage outputImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
  outputImage.getGraphics().drawImage(resultingImage, 0, 0, null);
  return outputImage;
}
BufferedImage resizedImage = resizeImage(ImageIO.read(new File("path_to_image")), 200, 200);
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(resizedImage, "jpg", baos);
byte[] bytes = baos.toByteArray();

这里通过resizeImage方法和resize方法将图片进行了压缩，将其宽度和高度缩小到了200像素。最后，使用ImageIO.write方法将图片转换为字节数组，方便在前端进行展示。

3. Javascript做前端

在前端，我使用了JavaScript的FileReaderApi来读取字节数组，并将其转换为Base64编码。以下是具体代码实现：

script
function toBase64(bytes) {
  let binary = '';
  for (let i = 0; i < bytes.length; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return btoa(binary);
}
let xhr = new XMLHttpRequest();
xhr.open('GET', 'path_to_image', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
  if (this.status === 200) {
    let base64 = toBase64(new Uint8Array(this.response));
    document.getElementById('image').src = 'data:image/jpeg;base64,' + base64;
  }
};
xhr.send();

这里通过XMLHttpRequest的responseType属性将返回的数据转换为字节数组，并将其转换为Base64编码，最后将其作为img元素的src属性值，展示在前端页面中。

综上所述，我通过javaexcel导出图片和图片压缩，使得前端页面能够高效地展示图片。这也是我在前端工程师职业生涯中遇到的一个有挑战性的问题，这次经验也让我收获颇丰。

相似文章
• ECMAScript和 Javascript的关系
  ECMAScript和 Javascript的关系
  
  

友情链接
• 网站定制开发
• 帮你发
• 小蓄群站获客
• 雅圣洁家政