利用cropper插件裁剪本地图片，然后将裁剪过后的base64图片上传至后台

此插件的依赖项
（ zepto || jquery 之一）

HTML部分

    

        

            
        
        

            

                
                选择图片
            
            

                向左旋转
                向右旋转
            
            取消
            确定
        
    

CSS部分

   .img_pop_up {
      width     : 100%;
      height    : 100%;
      background: rgba(0,0,0,.5);
      z-index   : 999;
      position  : absolute;
      display   : none;

      .self_img_pop_up {
            background   : #fff;
            border-radius: 0.5rem;
            position     : absolute;
            top          : 0;
            right        : 0;
            bottom       : 0;
            left         : 0;
            width        : 96%;
            height       : 80%;
            margin       : auto;
            padding-top  : 1rem;

            .cut_img {
                  width : 94%;
                  height: 75%;
                  margin: 0 auto;

                  // img {
                  //   width : 100%;
                  //   height: 100%;
                  // }
            }

            .confirm_button {
                  width     : 100%;
                  height    : 25%;
                  text-align: center;
                  padding: 0 10%;

                  .rotate_div{
                        width: 100%;
                        height:100%;
                        overflow: hidden;
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        align-content: space-around;

                        .picture_div{
                          border       : none;
                          width        : 100%;
                          height       : 25%;
                          background   : #e0b268;
                          border-radius: 0.5rem;
                          font-size    : 1.5rem;
                          color        : #fff;
                          position: relative;
                          display: table;

                          span{
                            display: table-cell;
                            vertical-align: middle;

                          }

                          input{
                            position: absolute;
                            opacity: 0;
                            left:0;
                            top:0;
                            height: 100%;
                            width: 100%;
                          }
                        }

                        button {
                          border       : none;
                          width        : 48%;
                          height       : 25%;
                          background   : #e0b268;
                          border-radius: 0.5rem;
                          font-size    : 1.5rem;
                          color        : #fff;
                        }

                  }

            }
      }
}

JS部分

监听上传变化 配置cropper参数,关于cropper参数，网上可以自由搜到,此处不做太多赘述,(移动端兼容关键参数：cropBoxMovable :false,//是否允许拖动裁剪框)

      // 监听上传变化
     $('#fileTest').live('change', function(ev) {
           let $file = $(this);
           let fileObj = $file[0];
           let windowURL = window.URL || window.webkitURL;
           let dataURL = null;
           if (!fileObj || !fileObj.files || !fileObj.files[0]) return;
           dataURL = windowURL.createObjectURL(fileObj.files[0]);
           $("#imgTest").attr('src', dataURL);
           $("#imgTest").cropper({
                aspectRatio: 1 / 1,
                viewMode : 1,
                rotatable: true,
                guides :false,//裁剪框虚线 默认true有
                dragMode : "move",
                background : true,// 容器是否显示网格背景
                movable : true,//是否能移动图片
                cropBoxMovable :false,//是否允许拖动裁剪框
                cropBoxResizable :false,//是否允许拖动 改变裁剪框大小
           });
           $("#imgTest").cropper('replace', dataURL);
    });

弹出框

    // 点击弹出
    $('.self_logo_up').off().on('click', function() {
        $('.img_pop_up').css('display', 'block');
    })

向左旋转按钮

// 向左旋转
 $('.rotate_left').off().on('click', function() {
      $("#imgTest").cropper('rotate', -45);
})

向右旋转按钮

// 向右旋转
$('.rotate_right').off().on('click', function() {
    $("#imgTest").cropper('rotate', 45);
})

取消上传按钮

// 取消上传图片事件
  $('.cancel_choose').off().on('click', function() {
         $('.img_pop_up').css('display', 'none');
        clear();
 })

点击确定按钮将base64赋给img标签

    // 点击确定
   $('.confirm_button .confirm_choose').off().on('click', function() {
          if ($("#imgTest").cropper('getCroppedCanvas') == null)  return;
          let base64 = $("#imgTest").cropper('getCroppedCanvas').toDataURL('base64', 0.3);
    $('.self_bg').remove();
    const logoImg = `

                          [图片上传失败...(image-1fecd5-1512026520854)]
                      
`
    $('.self_logo_up').append(logoImg);

    // 清空
    $("#imgTest").cropper('reset');
    $('.img_pop_up').css('display', 'none');
    clear();
});

希望对你有所帮助！