在onrendered中，我们可以直接使用location.href跳转查看图片，可以进行保存操作，也可以将url写入img的src中显示在界面上，如 $('#imgId').attr('src',url);
最后可以在界面展示刚刚截取到的图片：
五、上传图片保存到数据库，并在界面中获取该图片显示
现在得到url了，需要上传到后端，并存到数据库中，再另一个展示的界面中加载该图片。我一般习惯于使用url来存储图片路径，而不是用blob存储。
因为需要在另一个界面中获取图片，所以我把图片存在了与webapp同级的一个resource目录下，代码如下：
| //存储图片并返回图片路径 BASE64Decoder decoder = new BASE64Decoder(); byte[] b = decoder.decodeBuffer(product.getProPic().substring("data:image/png;base64,".length())); ByteArrayInputStream bais = new ByteArrayInputStream(b); BufferedImage bi1 = ImageIO.read(bais); String url = "user_resource" + File.separator + "img" + File.separator + "product_"+UUID.randomUUID().toString().replace("-", "")+".png"; String totalUrl = System.getProperty("root") + url; File w2 = new File(totalUrl); ImageIO.write(bi1, "png", w2); product.setProPic(url); //将图片的相对路径存储到数据库中 int res = productMapper.insertSelective(product); //添加到数据库 |
这里因为涉及到其它逻辑，所以只放一部分代码。
这里使用的是BASE64Decoder来存储图片，我们获取到图片后，需要使用substring将“data:image/png;base64,”的内容截取掉，因为“，”后面才是图片的url， url.substring("data:image/png;base64,".length()) 。
对于路径，上面代码中的url是我存储到数据库中的内容，而totalUrl就是实际进行ImageIO的write操作时存储的真实路径，getProperty()方法获取的项目的根目录，可以在web.xml中配置如下内容，然后 System.getProperty("root") 即可。
| <!-- 配置系统获得项目根目录 --> <context-param> <param-name>webAppRootKey</param-name> <param-value>root</param-value> </context-param> <listener> <listener-class> org.springframework.web.util.WebAppRootListener </listener-class> </listener> |
现在图片的url就存到数据库里了，而图片本身就存储在tomcat下该项目的这个目录下。
最后外面在界面上获取，只需要在当前的url前面加上项目名即可
