H5 canvas 截图（100%填充、截图比例可调节）

封装图片截取函数：

    /**
 * 视频屏幕截图
 * @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
);