图片裁剪之JQuery Crop

前言:很长时间没写图片裁剪,碰到了诸多问题,今特此记录,以免后面再遇到类似情况

插件GitHub网址:https://github.com/fengyuanchen/cropper

这次我用的插件是JQuery Crop,提交的时候是转成Base64然后再提交到后端的

先贴出代码来,然后在写我这次过程中遇到的种种问题以及处理方式

前端:具体的页面代码就不写了,具体demo有时间再放上来

      CSS

      JS

图片裁剪之JQuery Crop_第1张图片

图片裁剪之JQuery Crop_第2张图片

此次所遇到的问题

从后端开始说起

          1:获取项目路径,也就是uploadPath的时候,getServletContext()报错,"未定义"

                这个是由于Tomcat的版本过低造成的,好像是6.0及其以下的不行,推荐用7.0以上吧

          2:后端在写入图片信息的时候报错,说找不到指定路径,.tmp找不到

                   这个是因为当时我写了 DiskFileItemFactory factory = new DiskFileItemFactory(),然后写factory.setRepository的时                    候写错了,这个的解决办法有两个

                  ①:factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

                  ②:直接不写factory.setRepository

 

前端所遇到的问题

          1:我从GitHub上下载最新的插件下来,按照插件的引入了所有的js,但是如果我使用了AJAX提交,就会报错说AJAX未定义,最后查明是由于引入的JS有问题(我不知道是我弄错了还是插件本身就有问题,怀疑插件的这个版本有问题)

                 解决方法已经在截图里面,就是按照截图的JS来引入,不要按照插件里面的demo来引入

          2:form表单提交获取不了普通参数数据?

                 很久没有写图片上传,忘了有文件的表单提交需要有特殊方式来接收,具体代码可以自行百度,一大堆

          3:使用ajax提交的时候,获取不了数据?

                 contentType: false,  processData: false,就是因为在AJAX里面写了这两个东西,当时没注意,还浪费了我很多时间

          4:这里我还做了一个小实验,裁剪和普通的文件上传分别在submit和AJAX两种情况下后端要用什么样的方式接数据?

                1:如果是普通文件上传,不使用裁剪的话,用普通的form提交,普通参数的话用特定方式接收 2:如果是裁剪的                     话,form提交只可以获取到普通参数,但是获取不到文件信息,要用ajax的data方式提交(我这里用的是转成base64

          5:如何精确指定裁剪框的宽和高?

                注意代码没有在方法中,这个东西虽然被我搞出来了,但是感觉没什么屌用,因为每次重新上传图片以后这个就没                 了,被重置了、

          6:正是因为修改这个插件的属性很麻烦,所以,我直接到main.js里面改他的源代码去了,效果很好!

          总结:关于图片上传这个写了整整两天,这个插件总体来说还是很不错的,大部分功能都有,但是好像缺少了一次二次开发,有一些BUG,比如设置了属性以后,就像问题5,又比如设置了裁剪框的宽高比例,只要重新上传又变回原来的比例了,因为这些小问题,感觉自定义和可利用性降低了很多。当然了,这也可能是我没有研究透,还不会用这个插件,不过,话说回来,那个插件的说明文档可读性是真的LOW,哈哈!

你可能感兴趣的:(Java-后端,前端)