图片裁剪组件cropper

前言

  对于大多数网站,在图片上传到服务器之前,会对图片进行一些裁剪操作,以便得到更好规格的图片(个人头像)。这里就可以借助前端的组件cropper实现对图片的裁剪。当然,这里需要解决一个问题,如何获取即将上传到服务器的图片,显示在网页以便后期的操作。在图片显示在网页上,方法有大体有两种:前者,将图片先上传到服务器再返回图片url地址,这方法即牺牲了服务器的性能,又脱离当前的需求(不满足图片上传到服务器之前实现对图片的裁剪操作);后者,直接获取本地图片的资源并加载在当前的网页上,这种方法是最恰当不过了,不过在实现之前需要考虑不同浏览器之间的兼容性,保证不同浏览器都达到相同的效果。
  在这里,我总结一些js获取本地图片资源的方法,记录这些走过的坑。同时,也记录cropper一些使用方法。

加载图片

  • Chrome:是无法直接获取file对象的文本值,这样是无法直接加载本地图片资源。

    1
    2
    3
    解决办法:获取dataURL,用于img标签src属性。
    var windowURL = window.URL || window.webkitURL;
    var dataURL = windowURL.createObjectURL(fileObj.files[0]);
  • Edge、IE11 and 10:解决办法同上

  • IE9以下:是可以直接获取file对象的文本值,所以问题更容易解决。
    1
    2
    解决办法:获取file对象的文本值并加上file协议。
    var dataURL = "file:///" + $file.val();

触发器设置

  通过点击file控件,选择本地图片资源后,触发onchange回调函数,实现图片的切换。

  • file控件布

    1
    2
    3
    4
    5
    6
    <h3 class="page-header">Choose a picture</h3>
    <div class="form-group form-inline">
    <label>Picture:</label>
    <input type="file" class="form-control" id="file" >
    <button class="btn btn-default" id="btnSave">Save</button>
    </div>
  • 结合图片预览

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <script type="text/javascript">
    $("#file").on("change",function(){
    var $file = $(this);
    var fileObj = $file[0];
    var windowURL = window.URL || window.webkitURL;
    var dataURL;
    if(fileObj && fileObj.files && fileObj.files[0]){
    //Chrome、Edge、IE11|10
    dataURL = windowURL.createObjectURL(fileObj.files[0]);
    }else{
    //IE9 file:/// 协议
    dataURL = "file:///" + $file.val();
    }
    //替换img.src
    $("#image").attr("src",dataURL);
    //创建裁剪区
    buildCropper(dataURL);
    });
    </script>
  • cropper使用

    更多详细信息查看项目

cropper图片裁剪

最终效果

  本例Demo

评论