图片裁剪之JQuery Crop

　

crop

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

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

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

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

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

CSS

JS

此次所遇到的问题

从后端开始说起

  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：如何精确指定裁剪框的宽和高？

<script>
    var options = {
        viewMode: 1,//显示
        aspectRatio: 1 / 1,//裁剪框比例 1：1
        preview: '.img-preview',//设置自己属性以后必须指定这个才会有预览图
        minCropBoxWidth:128,
        autoCropArea:0.1, //第2-5三个属性可以精确指定裁剪框的宽和高
    };
    $("#image").cropper(options)

</script>

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

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

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

相关阅读