获取图片显示在jsp中

时间 2021-01-08

应用场景

如果我们本地或者服务器目录有一张图片，我们不能直接以访问静态资源的形式去访问这张图片。

所以考虑使用Action(服务端)作为中介去获得这张图片。

或者为了解决跨域问题:

比如我们使用了canvas把我们的动态页绘制保存成静态html页，但是动态页又用了其它第三方来源的图片，这种情况下canvas是不能绘制成功的，因为canvas不能跨域去获取第三方的图片。

所以我们需要把图片下载下来成流的形式再设置成允许跨域访问再返回给页面。

目标

把图片下载过来到内存里，然后response出去

原理

我们这里就有2种情况:

一种是读取本地获取服务器目录中的图片，转化成流的形式，把这个图片流用servlet的response直接返回到前台页面，通过解析在前台JSP页面上把这个图片显示出来。

第二种是下载第三方外链的图片，转化成流的形式，把这个图片流用servlet的response直接返回到前台页面，通过解析在前台JSP页面上把这个图片显示出来。

实例

我这里用的是springMVC框架。

本地服务器图片

[plain]view plain copy 
    
 @RequestMapping("/testpic")  
 public void testpic(HttpServletResponse response) throws IOException {          
     FileInputStream fis = null;  
     File file = new File("D://timg.jpg");  
     //File file = new File("home/images/test.png"); 服务器目录和本地图片的区别是图片路径  
     fis = new FileInputStream(file);  
     response.setContentType("image/jpg"); //设置返回的文件类型     
     response.setHeader("Access-Control-Allow-Origin", "*");//设置该图片允许跨域访问  
     IOUtils.copy(fis, response.getOutputStream());   
 }  

我们在浏览器或者jsp页面使用以下路由就能访问到(显示)该图片:

[plain]view plain copy 
    
 http://localhost:8080/testpic  

外链图片

[plain]view plain copy 
    
 @RequestMapping("/testpic")  
 public void testpic(HttpServletResponse response) throws IOException {  
     String imgUrl="https://www.baidu.com/img/bd_logo1.png";  
     URL url = new URL(imgUrl);                   
     URLConnection conn = url.openConnection();    
     InputStream inStream = conn.getInputStream();          
     response.setContentType("image/jpg"); //设置返回的文件类型     
     response.setHeader("Access-Control-Allow-Origin", "*");//设置该图片允许跨域访问  
     IOUtils.copy(inStream, response.getOutputStream());   
 }  

我们在浏览器或者jsp页面使用以下路由就能访问到(显示)该图片:

[plain]view plain copy 
    
 http://localhost:8080/testpic  

ps:判断图片类型

如果要判断不同的图片格式可以加上判断： string imgType=imgUrl.Substring(imgUrl.LastIndexOf(".")+1).ToLower(); switch(imgType) { case "jpg": imgType="image/jpeg"; break; case "gif": imgType="image/gif"; break; //........... default: return; }