H5移動端圖片裁剪（base64）

在移動端開發的過程中，或許會遇到對圖片裁剪的問題。當然遇到問題問題，不管你想什么方法都是要進行解決的，哪怕是丑點，難看點，都得去解決掉。

圖片裁剪的jquery插件有很多，我也測試過很多，不過大多數都是支持pc端的圖片裁剪，而支持移動端圖片裁剪的少，很流暢的可能就會更少了。

作為一個新手，我嘗試了很多種解決方法，在初始的時候嘗試自己寫一個jquery插件支持觸屏事件等，寫出來了，但是覺得都不好意思拿出手，更別說拿出來商用了。

又嘗試找了一些插件，一個個試。最后綜合評價，感覺還不錯的jquery插件：cropper這個jquery創建。

看了一下感覺還是挺簡單的。

下面就是我使用過程的一些代碼，希望能對大家有所幫助。

插件導入：

<link rel="stylesheet" href="../../../css/delimg/cropper.css"/>
<script src="../../../js/libs/jquery.min.js"></script>
<script src="../../../js/delimg/cropper.js"></script>

必要的一點html代碼：

<div class="img-container">
    <img src="" alt="">
</div>

　　注意：一般情況下，圖片會動態生成，所以當前的src值，為空。如果你是靜態圖片進行圖片截取，那就更簡單了。看下面代碼就懂了。

插件的使用（很簡單）：

var $image = $('.img-container > img');
     
$image.attr("src", imgurl);    

$image.on("load", function() {        // 等待圖片加載成功后，才進行圖片的裁剪功能
    $image.cropper({
        aspectRatio: 1 / 1　　// 1：1的比例進行裁剪，可以是任意比例，自己調整
    });
})        

現在只是做了一個框架，最主要的是下面的代碼，獲取到圖片的數據才是最主要的，所以我們需要利用到canvas的特異功能，將圖片裁剪的部分轉化為base64的字符串進行前后端數據的交互。

然而，cropper並不會給你提供現成的base64字符串，但是他給你了一串的數據對象，供你自己任意發揮。

點擊某個按鈕時，確定剪裁這一高亮的部分：

$(selector).on("tap", function() {
    var src = $image.eq(0).attr("src");
    var canvasdata = $image.cropper("getCanvasData");
    var cropBoxData = $image.cropper('getCropBoxData');
    
    convertToData(src, canvasdata, cropBoxData, function(basechar) {
        // 回調后的函數處理        
    });
})

當然這也不是重點，重點是下面這個函數處理

function convertToData(url, canvasdata, cropdata, callback) {
    var cropw = cropdata.width; // 剪切的寬
    var croph = cropdata.height; // 剪切的寬
    var imgw = canvasdata.width; // 圖片縮放或則放大后的高
    var imgh = canvasdata.height; // 圖片縮放或則放大后的高
    
    var poleft = canvasdata.left - cropdata.left; // canvas定位圖片的左邊位置
    var potop = canvasdata.top - cropdata.top; // canvas定位圖片的上邊位置
    
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext('2d');
    
    canvas.width = cropw;
    canvas.height = croph;
    
    var img = new Image();
    img.src = url;
    
    img.onload = function() {
        this.width = imgw;
        this.height = imgh;
            // 這里主要是懂得canvas與圖片的裁剪之間的關系位置
        ctx.drawImage(this, poleft, potop, this.width, this.height);
        var base64 = canvas.toDataURL('image/jpg', 1);  // 這里的“1”是指的是處理圖片的清晰度（0-1）之間，當然越小圖片越模糊，處理后的圖片大小也就越小
        callback && callback(base64)      // 回調base64字符串
    }
}    

好啦，就到這里了，該處理的東西都處理了，當然這里一個放大縮小的正向處理剪裁，如果需要對圖片的旋轉等一些列的操作的話，也是可以得，這里只是給大家展示一個簡單的demo的實現，如果有用得上的，可以作為參考。