JQuery 图像裁剪插件Jcrop实现图片上传功能(mysql DB)

浅浅的花香味﹌ 2022-07-16 00:46 226阅读 0赞

## 需求 ##

最近在做一个企业设置的模块，要求可以上传企业logo到mysql数据库当中，在企业登录首页的时候，就可以显示出来这个logo。我实现这个功能使用了一个JQ的插件，可以裁剪上传的图片，实现logo的简单处理制作。

## 代码实现 ##

*  引用Jcrope 的包在jsp中

<script type="text/javascript" src="${pageContext.request.contextPath}/common/tapmodo-Jcrop-v0.9.12-0-g1902fbc/tapmodo-Jcrop-1902fbc/js/jquery.min.js"></script>
    <%@ include file="/common.jsp"%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/common/tapmodo-Jcrop-v0.9.12-0-g1902fbc/tapmodo-Jcrop-1902fbc/js/jquery.Jcrop.js"></script>
    
    <link href="${pageContext.request.contextPath}/common/tapmodo-Jcrop-v0.9.12-0-g1902fbc/tapmodo-Jcrop-1902fbc/demos/demo_files/main.css" rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/common/tapmodo-Jcrop-v0.9.12-0-g1902fbc/tapmodo-Jcrop-1902fbc/demos/demo_files/demos.css" rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/common/tapmodo-Jcrop-v0.9.12-0-g1902fbc/tapmodo-Jcrop-1902fbc/css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />

*  视图

点击企业logo，跳转到企业logo设置界面

![这里写图片描述][20160925203837018]

上传图片  
![这里写图片描述][20160925203927864]

*  controller上传动作

@RequestMapping(value = "/uploadHeadImage")
      public ModelAndView uploadHeadImage(
              HttpServletRequest request,HttpServletResponse response,
              @RequestParam(value = "x") String x,
              @RequestParam(value = "y") String y,
              @RequestParam(value = "h") String h,
              @RequestParam(value = "w") String w,
              @RequestParam(value = "imgFile",required = false) MultipartFile imageFile
      ) throws Exception{
    
          String databaseName = (String) request.getSession().getAttribute(
                    CloudContext.DatabaseName)+"_authority";
    
          String realPath = request.getSession().getServletContext().getRealPath("/");
          String resourcePath = "resources/uploadImages/";
          if(imageFile!=null){
              if(FileUploadUtil.allowUpload(imageFile.getContentType())){
                  String fileName = FileUploadUtil.rename(imageFile.getOriginalFilename());
                  int end = fileName.lastIndexOf(".");
                  String saveName = fileName.substring(0,end);
                  File dir = new File(realPath + resourcePath);
                  if(!dir.exists()){
                      dir.mkdirs();
                  }
                  File file = new File(dir,saveName+"_src.jpg");
                  imageFile.transferTo(file);
                  String srcImagePath = realPath + resourcePath + saveName;
                  int imageX = ProcessString(x);         
                  int imageY = ProcessString(y);
                  int imageH = ProcessString(h);
                  int imageW = ProcessString(w);
                  //这里开始截取操作
    
                  BufferedImage tag= ImageCut.imgCut(srcImagePath,imageX,imageY,imageW,imageH);
    
                  FileInputStream inputStreamResult=getImageByte(srcImagePath+"_cut.jpg");
                  //获取企业号-zhouzhou
                  String companyId=(String) request.getSession().getAttribute(
                        CloudContext.DatabaseName);
                  //企业数据库
                  String dataBaseName=(String) request.getSession().getAttribute(
                            CloudContext.DatabaseName)+"_authority";
                  companyLogo= companyBean.getCompanyInfoInfoBycompanyId(companyId,databaseName);
                  byte[] photo = new byte[inputStreamResult.available()];
    
                  inputStreamResult.read(photo);
                  inputStreamResult.close();
    
                  companyLogo.setCompanyLogo(photo);  
                  companyLogo.setDataBaseName(dataBaseName);
                  companyBean.updateEntity(companyLogo);
              }
          }
          return new ModelAndView("companyLogo");
      }

获取图片位置

private int ProcessString(String y)
      {
          int result;
          int is=y.indexOf(".");
            if (is==-1) {
            //没有点的时候
                result = Integer.parseInt(y);
            }else {
                //有点
                result =Integer.valueOf(y.substring(0,y.indexOf(".")));
            }
            return result;
      }

在公司首页显示logo  
![这里写图片描述][20160925204052364]

定义一个输出流，从mysql中查出内容，获取图片。DB中的字段为mediumblob类型，BLOB是一个二进制大型对象，是一个可以存储大量数据的容器，它能容纳不同大小的数据。mediumblob最多16M。

/** * 查询企业logo * * @author zhouzhou * @version 5.0 , 2016年9月19日19:17:59 * @param company * @param request * @param response */
          @RequestMapping(value="/LoadcompanyLogo")
          public void LoadCompanyLogo(Company company,HttpServletRequest request,HttpServletResponse response) {
              //获取数据库名称-zhouzhou
            String databaseName = (String) request.getSession().getAttribute(
                        CloudContext.DatabaseName)+"_authority";
            Company companyLogo;
            OutputStream os;
            try {
                os = response.getOutputStream();//定义一个输出流
                //获取企业号-zhouzhou
                  company.setNumber((String) request.getSession().getAttribute(
                            CloudContext.DatabaseName));
                  companyLogo= startHomeBean.getCompanyInfoInfoBycompanyId(company.getNumber(),databaseName);
                  if (company!=null)
                  {
                      byte [] yingjie= companyLogo.getCompanyLogo();
                      if(yingjie!=null && yingjie.length>0)
                      {
                          os.write(yingjie);                 
    
                      }else {
    
                    }
                      os.flush();  
                      os.close();             
                  }
    
            } catch (IOException e) {
    
                e.printStackTrace();
            }     
    
          }

## 总结 ##

通过这个功能的开发，知道了mysql如何去储存图片，如何用JQ插件裁剪图片。之前只知道mongodb，FastDFS可以存储，后来才知道其实技术定位是根据需求而来了。单独存储几个小图片，还是用mysql就好。  
要知道在什么需求下，使用什么技术。这才是一个合格的开发。

[20160925203837018]: /images/20220716/2732194c4b184da698b7ad5fde496fb0.png
[20160925203927864]: /images/20220716/01e3d138246647cf95aeb305e22c6a18.png
[20160925204052364]: /images/20220716/9a36a2ef5a244b09b82130a5b16518b5.png