封裝圖片截取函數：

    /**
 * 視頻屏幕截圖
 * @param {object} file圖片文件對象
 * @param {number} percentage 寬/高 百分比
 * @param {function} okCallback 點擊“確定”回調
 * @param {function}cancelCallback 點擊“取消”回調
 */
openComfire: function(okCallback, cancelCallback, file,percentage) {
    var modalInstance = $uibModal.open({
        animation: false,
        templateUrl: 'app/pages/common/modalTemplates/ImgCut.html',
        controller: function($scope) {
            var image = new Image();
            image.src = window.URL.createObjectURL(file);
            var canvas, ctx, div_width, div_height, old_width, old_height, scale_x, scale_y;
            image.onload = function() {
                canvas = document.getElementById("can");
                $("#can").attr({
                    width:750,
                    height: 750/percentage
                })
                ctx = canvas.getContext('2d');
                div_width = $("#can").width();
                div_height = $("#can").height()
                old_width = image.width;
                old_height = image.height;
                console.log(old_width/old_height)
                scale_x = div_height * old_width / old_height;//圖片壓縮以后的寬度
                scale_y = div_width * old_height / old_width;//圖片壓縮以后的高度
                if(old_width/old_height < percentage) { //長了
                    ctx.drawImage(image, 0, 0, old_width, old_height, 0, 0, div_width, scale_y);
                } else { //長圖
                    ctx.drawImage(image, 0, 0, old_width, old_height,0, 0, scale_x, div_height);
                }
            }
            var x, y, relativeX, relativeY, mousemoveMark = 0;
            $("body").on("mousedown", "#can", function(e) {
                e = event || window.event;
                e.preventDefault();
                x = e.pageX - $(this).offset().left;
                y = e.pageY - $(this).offset().top;
                mousemoveMark = 1;
            })
            $("body").on("mousemove", "#can", function(e) {
                console.log(mousemoveMark)
                if(mousemoveMark) {
                    e = event || window.event;
                    e.preventDefault();
                    relativeX = e.pageX - $(this).offset().left;
                    relativeY = e.pageY - $(this).offset().top;
                    changePosition(relativeX - x, relativeY - y)
                }
            })
            $("body").on("mouseup", "#can", function(e) {
                e = event || window.event;
                e.preventDefault();
                mousemoveMark = 0
            })
            function changePosition(x, y) {
                ctx.clearRect(0, 0, div_width, div_height);
                if(old_width/old_height > percentage) {
                    ctx.drawImage(image, 0, 0, old_width, old_height, x, y, div_width, scale_y);
                } else {
                    ctx.drawImage(image, 0, 0, old_width, old_height, x, y, scale_x, div_height);
                }
            }
        },
        size: 'lg',
    });
    modalInstance.result.then(function() {
        console.log('click modal ok');
        angular.isFunction(okCallback) && okCallback();
    }, function() {
        console.log('modal dismiss');
        angular.isFunction(cancelCallback) && cancelCallback();
    });
}

調用函數：

imgCut.openComfire(
   function() {
       var base64Codes=$("#can")[0].toDataURL("image/jpeg");
       /**  
        * @param base64Codes  
        *            圖片的base64編碼  
        */  
         var form=$("#formBase64");  
       var formData = new FormData(form);   //這里連帶form里的其他參數也一起提交了,如果不需要提交其他參數可以直接FormData無參數的構造函數   
       //convertBase64UrlToBlob函數是將base64編碼轉換為Blob  
       formData.append("imageName",convertBase64UrlToBlob(base64Codes));  //append函數的第一個參數是后臺獲取數據的參數名,和html標簽的input的name屬性功能相同  
       file=formData.get("imageName");//得到截圖之后的file文件
       /**  
        * 將以base64的圖片url數據轉換為Blob  
        * @param urlData  
        *            用url方式表示的base64圖片數據  
        */  
       function convertBase64UrlToBlob(urlData){  
           var bytes=window.atob(urlData.split(',')[1]);//去掉url的頭，并轉換為byte 
           //處理異常,將ascii碼小于0的轉換為大于0  
           var ab = new ArrayBuffer(bytes.length);  
           var ia = new Uint8Array(ab);  
           for (var i = 0; i < bytes.length; i++) {  
               ia[i] = bytes.charCodeAt(i);  
           }  
           console.log(ia)
           return new Blob( [ab] , {type : 'image/png'});  
       }    
   }, function() {}, file,percentage
);