将blob图像转换为数组以显示在spring mvc的网页中

Posted 2023-02-24

【中文标题】将blob图像转换为数组以显示在spring mvc的网页中

【英文标题】：converting blob image to array to display in the web page in spring mvc

【发布时间】：2015-01-24 13:27:50

【问题描述】：

我正在尝试显示客户个人资料的图像。并且图像以blob类型存储在mysql中。我正在使用带有休眠的spring mvc。我知道要显示 blob 类型的图像，我们必须转换为字节。我在某种程度上做到了。现在卡住了，无法显示任何图像。

  my controller:
   @RequestMapping(value="/myProfile.htm", method=RequestMethod.GET)

  public ModelAndView Profilelist(HttpServletRequest request,ModelMap model,Customer        
 customer,Profile profile, HttpServletResponse response) throws SQLException , 
 Exception
    //Profile profile = new Profile();

    String customerName = request.getUserPrincipal().getName();

    customer = customerService.getCustomerId(customerName);
    profile = profileService.getBycustomerId(customer);
    System.out.println("cust:  "+ customer);
    System.out.println("profile:  "+ profile);
    logger.error("Viewing Profile" +customerName);
    //Customer customer = new Customer();



    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    byte[] buf = new byte[1024];
    /*byte[] encodeBase64 = Base64.encodeBase64(buf);
    String base64Encoded = new String(encodeBase64, "UTF-8");
    ModelAndView mav = new ModelAndView();
    mav.addObject("profile", base64Encoded);*/
    Blob blob = profile.getContent();
    InputStream in = blob.getBinaryStream();
    System.out.println("id content" +in);
    int n = 0;
    while ((n=in.read(buf))>=0)
    
       baos.write(buf, 0, n);

    

    in.close();
    byte[] bytes = baos.toByteArray(); 
    System.out.println("bytes" +bytes);
    byte[] encodeBase64 = Base64.encodeBase64(buf);
    String base64Encoded = new String(encodeBase64, "UTF-8");
    ModelAndView mav = new ModelAndView();
    //mav.addObject("content", base64Encoded);
    customer.setEmailId(customerName);
    profile.setCustomer(customer);
    //profile.setContent(blob);
    System.out.println();
    profile = profileService.findProfileById(customer);
    model.addAttribute("content",base64Encoded);

    model.addAttribute("profile", profile);
    mav = new ModelAndView("myProfile");
    return mav;

在 jsp 中我称之为

       <img  src= "data:image/jpeg;bytes,$profile.content"/>

我的jsp是

     <form:form method="GET" modelAttribute="profile" action="myProfile.htm"   
             enctype="multipart/form-data">


            <div class="containerdiv" align="center" >

                   <img  src= "data:image/jpeg;bytes,$content"/>

                   </div>
   </form:form>

【参考方案1】：

只需在 JSP 中使用此代码

<img  src="data:image/jpeg;base64,$content"/>

<img tag> 中有“字节”，我得到了相同的损坏图标。然后我在<img> 标签中使用'base64'及其工作！

【参考方案2】：

在您的数据库上保留 Image Blob 对象不是一个好习惯。只需将图像的文件名保存在 db 中，并将图像本身保存到某个路径。

我知道这不是您要求的，但是如果您知道如何将照片上传到特定目录并且由于您使用的是 spring，您可以将其作为替代方案。

你为什么不创建一个控制器来为你读取图像。看到这个：

@Controller
public class ImageReadFile

    // this is for mapping your image related path. 
    @RequestMapping(value="/image/*")
    public void readImage(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException 

        ServletContext sc = request.getServletContext();

        //here i uploaded my image in this path
        String imagePath = "/home/somefolder/Workspaces/Images/";
        String [] fragmentFilename = request.getServletPath().split("/");

        //Check if image isn't set
        if(fragmentFilename.length <= 2)
            return;
        

        String filename = fragmentFilename[2];
        String requestedImage = "/"+filename;

        if(filename == null)
            response.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        

        File image = new File(imagePath, URLDecoder.decode(requestedImage, "UTF-8"));

        if(!image.exists())
            response.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        

        String contentType = sc.getMimeType(image.getName());
        response.reset();
        response.setContentType(contentType);
        response.setHeader("Content-Length", String.valueOf(image.length()));
        Files.copy(image.toPath(), response.getOutputStream());
    

这就是你要显示图像的方式

<img  src="$pageContext.request.contextPath/image/$profile.filename">

这就是我在我的 web 应用中显示图像的方式。

【讨论】：

好的，我会尝试...如果它对我有用...非常感谢您...提前谢谢您

【参考方案3】：

你写了一些错误的代码，让我试着纠正它，

替换

ModelAndView mav = new ModelAndView();
//mav.addObject("content", base64Encoded); 
customer.setEmailId(customerName);
profile.setCustomer(customer);
//profile.setContent(blob); 
System.out.println();
profile = profileService.findProfileById(customer);
model.addAttribute("content",base64Encoded);

model.addAttribute("profile", profile);
mav = new ModelAndView("myProfile");
return mav;

---

有

ModelAndView mav = new ModelAndView();
customer.setEmailId(customerName);
profile.setCustomer(customer);
profile = profileService.findProfileById(customer);
mav.addObject("content", base64Encoded);
mav.addObject("profile", profile);   
return mav;

【讨论】：

我按照您的建议做了...同样的问题...只是页面上显示了一个损坏的图像图标。但是当我在新标签中打开那个损坏的图像图标时，一个大的 url 来了，但是同样的损坏的图像来了。有消息

“数据：图像/ JPEG;字节，55SAG3JJJjWSSTP5Co + 5dKy0kA / xAiffTjEXr1sD2 / swOQzkE8j91ST + taiuIcV9rltosAfH / AS / 6T / wrDQq + PDApIM + OtNzeVSuXfbeNN + UA + tJLhbgYDL8RHqaZXcPczfdiOZ29OtWmmIsvD7YuuQ + q8lH589PnUXjsGqXSikgzIg7T / xvS3BrwttmcyeszPXypvjmzYlmzSNIKjYbRp0 + tbprov8ApHV9n / wkThdp38qFKzMEnl1rla0QiEs4jwp2cQI2oUK8t7OwicDjG9o4Yk6H0g09a9rQoVfIlYkxPEkFe9MeG9JYbGgaKs52G0zYmC0K8S49bt9y0DcunSAJA6kkdKr / ABPtFcxByWhCfygn4jeu4LCXlEW7Rk7s0SfMnl4UAPrl0ALNtw ==" 因为它包含错误

当我打开那个损坏的图像图标时，它就会出现

对，您得到的响应就像您从控制器发送相同的数据一样。

【参考方案4】：

看起来您的图像仍然使用配置文件中的 blob 而不是编码字符串。直接使用 content 属性试试

<img  src= "data:image/jpeg;bytes,$content"/>

【讨论】：

感谢您的回复...我按照您说的做了...仍然是同样的问题

从过去的两天开始就一直坚持这个

只显示一个损坏的图像图标。但是当我在新标签中打开那个损坏的图像图标时，一个大的 url 来了，但是同样的损坏的图像来了。