cropper.js圖片裁剪——第二彈

之前有研究過圖片裁剪，主要是是獲取到裁剪的坐標，然后將坐標以及原圖上傳到后台，后台進行裁剪的方法：鏈接地址

今天主要是 前端進行裁剪，之后吧裁剪過得圖片base64源碼，上傳至后台的方法：

 

1.引入資源

資源下載地址：

Cropper v4.0.0
* https://github.com/fengyuanchen/cropper

移動端使用的時候 還要修改一些樣式 適配移動端

這里放一個使用過的樣式：

.dialog {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99;
  top: 0;
  left: 0;
}
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 1);
}
.main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.handle {
  position: fixed;
  bottom: .7rem;
  right: 0;
  z-index: 100;
  color: #fff;
}
.handle span {
  display: block;
  background: #000;
  line-height: 1.4rem;
  padding: 0 1rem;
  cursor: pointer;
  font-size: .52rem;
  float: left;
  margin-right: .3rem;
}

 

2.html結構

<!-- 圖片裁剪-->
<div class="dialog">
    <div class="mask"></div>
    <div class="main">
        <img src="" alt="" id="image">
    </div>
    <div class="handle clearfix">
        <span class="cancle">取消</span>
        <span class="finish">完成</span>
    </div>
</div>

3.js

 

 

 $(".dialog").show();
                            //$('#image') 是img 標簽，是獲取到的result
                            // destroy 銷毀cropper並從圖像中刪除整個cropper
                            //cropper 開始調用裁剪
                            $('#image').cropper('destroy').attr('src', result).cropper({
                                aspectRatio: 0.75, // 縱橫比
                                //viewMode定義cropper的視圖模式
                                /*  0：沒有限制，3可以移動到2外。
                                    1 : 3只能在2內移動。
                                    2：2圖片 不全部鋪滿1 （即縮小時可以有一邊出現空隙）
                                    3：2圖片填充整個1
                                    */
                                viewMode: 1,
                                //顯示在裁剪框上方的虛線
                                guides: false,
                            });
                            $(".finish").on('click', function () {
                                //確定裁剪
                                crop();
                                $(".dialog").hide();
                            });
                            $(".cancle").on('click', function () {
                                //裁剪取消
                                crop_cancle();
                                $(".dialog").hide();
                            });

 

點擊確定和取消的方法

 var resImg = null;      //剪切后圖片base64編碼資源
    //確定裁剪的方法
    var crop = function () {
        var img = $('#image');
        var $target = $('#upload');
        //getCroppedCanvas畫一張剪裁的圖片。如果沒有剪裁，則返回一個繪制整個im的畫布
        resImg = img.cropper('getCroppedCanvas', {
            // width輸出Canvas的寬度
            // height輸出Canvas的高度
            width: 900,
            height: 1200
        }).toDataURL('image/jpeg');//返回一個包含圖片展示的 data URI 。可以使用 type 參數其類型，默認為 PNG 格式。圖片的分辨率為96dpi。q
        $target.attr('src', resImg);
      
        //利用表單提交 這個是隱藏input用來提交 裁剪之后的banse64源碼
        $('#upImg').val(resImg);
    };
    //取消裁剪
    var crop_cancle = function () {
        console.log( $('#upImg').val())
        //將圖片置空
        $('#image').attr('src', '');
    };

這樣就可以獲取到 裁剪之后的banse64源碼，利用表單提交

 

關於cropper的基本介紹

 

1.直接設置img的寬高是沒有效果的，但是可以在父盒子上.main設置；img在裁剪中是display:none的情況

<div class="main" style="width: 100px">
        <img src="" alt="" id="image" >
    </div>

 配置項

2.viewMode　　定義cropper的視圖模式  默認 0

  　　　　　　　　　　　　　　　　　　 /* 0：沒有限制，3可以移動到2外。
                                    1 : 3只能在2內移動。
                                    2：2圖片 不全部鋪滿1 （即縮小時可以有一邊出現空隙）
                                    3：2圖片填充整個1
                                    */

3.dragMode 　　定義cropper的拖拽模式   默認 crop

‘crop’: 可以產生一個新的裁剪框3 
‘move’: 只可以移動3
‘none’: 什么也不處理

4.aspectRatio　　裁剪框的寬高比  默認 可手動改變比例

5.preview　　　　添加額外的元素(容器)以供預覽 ,除了裁剪區域可以看出裁剪的效果，也可以提供其他元素展示 裁剪后的效果（看需求） 默認：‘’

注意這里是一個dom元素。必須可以被Document.querySelectorAll獲取到； 
preview:".box", 
HTML結構：<div class="box"></div>；注意一定要設置box的寬高；最好和裁剪比例一致；還有如果要想正確的顯示出裁剪的區域需要加上樣式overflow: hidden; 

6.responsive　　　在調整窗口大小的時候重新渲染cropper 默認：true

7.restore　　　　　在調整窗口大小后恢復裁剪的區域 默認：true

8.checkCrossOrigin　　檢查當前圖像是否為跨域圖像  默認：true

9.modal　　　　　　裁剪的時候的黑色遮罩層是否展示 默認：true

10.guides　　　　　顯示在裁剪框上方的虛線 默認：true

11.center　　　　　裁剪框在圖片正中心 默認：true

12.highlight　　　　在裁剪框上方顯示白色的區域 默認：true

13.background　　  顯示容器的網格背景 默認：true

14.autoCrop　　　　當初始化時，可以自動生成裁剪框，而不是用戶進行 拖拽 或者點擊操作 才觸發出現裁剪框   默認：true

15.autoCropArea　　定義自動裁剪面積大小(百分比)和圖片進行對比 默認：0.8

16.movable　　　　  是否允許可以移動被裁剪圖片    默認：true

17.rotatable　　　　  是否允許旋轉圖像 默認：true

18.scalable　　　　   是否允許縮放圖像 默認：true

19.zoomable　　　　是否允許放大圖像 默認：true

20.zoomOnTouch　　是否可以通過拖動觸摸來放大圖像  默認：true

21.zoomOnWheel　　是否可以通過移動鼠標來放大圖像  默認：true

22.wheelZoomRatio　用鼠標移動圖像時，定義縮放比例  默認：0.1；

23.cropBoxMovable　是否通過拖拽來移動剪裁框  默認：true

24.cropBoxResizable　　是否通過拖動來調整剪裁框的大小 默認：true

25.toggleDragModeOnDblclick　　當點擊兩次時可以在“crop”和“move”之間切換拖拽模式 默認：true

26.ready　　　　　　插件准備完成執行的函數（只執行一次）

27.cropstart　　　　   剪裁框開始移動執行的函數

28.cropmove　　　　  剪裁框移動時執行的函數

29.cropend　　　　　 剪裁框移動結束執行的函數

30.crop　　　　　　　剪裁框發生變化執行的函數

31.zoom　　　　　　 剪裁框縮放的時候執行的函數

 

內置方法：

crop()

$("#image").cropper({
  autoCrop: false, //關閉自動顯示裁剪框
  ready: function () {
    $(this).cropper('crop'); crop展示裁剪框
  }
});

reset()

$("#reset").on("click", function () {
        $('#image').cropper('reset'); //重置為初始狀態
   })

clear

$("#clear").on("click", function () {
        $('#image').cropper('clear');//清空裁剪
    })

replace

$("#replace").on("click", function () {
        $('#image').cropper('replace',"img/gt.png",true );  //替換新的裁剪圖片
    })

disable

$("#disable").on("click", function () {
        $('#image').cropper('disable');//裁剪框不可移動
    })

enable

$("#enable").on("click", function () {
        $('#image').cropper('enable');
    })

destroy

$("#destroy").on("click", function () {
        $('#image').cropper('destroy'); //銷毀cropper
    })

 

 

找到一個翻譯官網的博客