SSM从mysql中取出数据并转换为图片展示在前端

如何将2进制数转为图片在前端展示？

在制作个人博客的时候遇到的问题，想将数据库（mysql）中的longblob数据类型的数据转为jpg格式的图片展示在前端作为头像，我使用的ssm框架，不知道如何才能做到

结构如下：

重要的程序：
UserDao：

package com.ylq.dao;

import com.ylq.domain.User;
import org.apache.ibatis.annotations.*;

@Mapper
public interface UserDao {
    @Select("select * from user where id=#{id}")
    public User selectById(long id);

    @Insert("insert into user(id,user_name,email,created_time,updated_time,password)  values(#{id},#{userName},#{email},#{createdTime},#{updatedTime},#{password})")
    public void insertOne(User user);

    @UpdateProvider(type = UserSqlProvider.class,method = "updateUser")
    public void update(User user);
}

UserServiceImpl：

package com.ylq.service.impl;

import com.ylq.dao.UserDao;
import com.ylq.domain.User;
import com.ylq.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    UserDao userDao;
    @Override
    public User selectById(long id) {
        User user=userDao.selectById(id);
        return user;
    }

    @Override
    public void insertOne(User user) {
        userDao.insertOne(user);
    }

    @Override
    public void update(User user) {
        userDao.update(user);
    }
}

domain实体类

package com.ylq.domain;

public class User {
    private long id;
    private String userName;
    private String email;
    private String createdTime;
    private String updatedTime;
    private String password;
    private byte[] avatar;

    public byte[] getAvatar() {
        return avatar;
    }

    public void setAvatar(byte[] avatar) {
        this.avatar = avatar;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", userName='" + userName + '\'' +
                ", email='" + email + '\'' +
                ", createdTime='" + createdTime + '\'' +
                ", updatedTime='" + updatedTime + '\'' +
                ", password='" + password + '\'' +
                ", avatar='" + avatar + '\'' +
                '}';

    }

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getCreatedTime() {
        return createdTime;
    }

    public void setCreatedTime(String createdTime) {
        this.createdTime = createdTime;
    }

    public String getUpdatedTime() {
        return updatedTime;
    }

    public void setUpdatedTime(String updatedTime) {
        this.updatedTime = updatedTime;
    }
}

数据库：

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  首先，我们需要在User实体类中将头像属性声明为byte[]类型。这是因为在Java中，longblob类型的数据在数据库中以字节流的形式保存，因此我们需要在Java中将其作为字节数组来处理。

  接下来，在UserDao和UserMapper.xml中，我们需要添加查询头像的方法。代码如下：

  UserDao：

  public byte[] getAvatarById(int id);
  

  UserMapper.xml：

  <select id="getAvatarById" parameterType="int" resultType="byte[]">
      SELECT avatar FROM user WHERE id = #{id}
  </select>
  

  然后，在UserService中的实现类UserServiceImpl中，我们需要调用UserDao中的getAvatarById方法来获取字节数组，然后将其转换为jpg格式的图片，并返回给前端。代码如下：

  @Autowired
  private UserDao userDao;
  
  @Override
  public byte[] getAvatarById(int id) {
      byte[] avatarBytes = userDao.getAvatarById(id); // 获取头像字节数组
  
      // 将字节数组转换为BufferedImage对象
      BufferedImage bufferedImage = null;
      try {
          ByteArrayInputStream byteArrayInputStream = new ByteArrayInputStream(avatarBytes);
          bufferedImage = ImageIO.read(byteArrayInputStream);
      } catch (IOException e) {
          e.printStackTrace();
      }
  
      if (bufferedImage != null) {
          // 将BufferedImage对象转换为jpg格式的字节数组
          ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
          try {
              ImageIO.write(bufferedImage, "jpg", byteArrayOutputStream);
          } catch (IOException e) {
              e.printStackTrace();
          }
          return byteArrayOutputStream.toByteArray();
      }
  
      return null;
  }
  

  最后，在前端展示头像时，我们可以通过标签来显示图片。代码如下：

  <img src="data:image/jpeg;base64,${avatarBytesBase64}">
  

  其中，avatarBytesBase64是一个base64编码后的字符串，其值可以在Controller中通过调用UserService的getAvatarById方法来获取。

  以上就是将longblob类型的数据从MySQL数据库取出并转换为jpg格式的图片的具体步骤和代码实现。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

图片不大的话，存 base64编码的图片数据，前端用img标签展示

<!-- /9j/4AAA  为 base64编码的 图片数据  -->
<img src= "data:image/png;base64,/9j/4AAA">