基於H5+ API手機相冊圖片壓縮上傳

// 母函數
function App(){}
/**
 * 圖片壓縮，默認同比例壓縮
 * @param {Object} path
 *         pc端傳入的路徑可以為相對路徑，但是在移動端上必須傳入的路徑是照相圖片儲存的絕對路徑
 * @param {Object} obj
 *         obj 對象 有 width， height， quality(0-1)
 * @param {Object} callback
 *         回調函數有一個參數，base64的字符串數據
 */
App.prototype.dealImage = function(path, obj, callback) {
    var img = new Image();
    img.src = path;
    img.onload = function() {
        var that = this;
        // 默認按比例壓縮
        var w = that.width,
            h = that.height,
            scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = 0.7; // 默認圖片質量為0.7

        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        // 創建屬性節點
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);

        ctx.drawImage(that, 0, 0, w, h);
        // 圖像質量
        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
            quality = obj.quality;
        }
        // quality值越小，所繪制出的圖像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回調函數返回base64的值
        callback(base64);
    }
}



/**
 * 獲取圖片后處理回調處理數據
 * @param {Object} delobj
 *         需要處理的對象參數
 * @param {Object} cb
 *         回調函數返回需要處理的數據，包括源文件大小，處理后的文件大小，文件名
 */
App.prototype.delPhotoMsg = function (delobj, cb){
    var camera = plus.camera.getCamera();
    var res = camera.supportedImageResolutions[0];
    var fmt = camera.supportedImageFormats[0];
    var _this = this;
    var fileObj = {
        origin : {},
        now : {}
    };         // 回調對象接口
    // 獲取攝像頭進行拍照
    camera.captureImage(function(path) {
        plus.io.requestFileSystem(plus.io.PRIVATE_WWW, function(fs){
            fs.root.getFile(path, {create: true}, function(fileEntry){
                fileEntry.file(function(file){
//                    console.log("原始文件大小：" + file.size / 1024 +"KB   filename:"+file.name);
                    origin(file.size, file.name);
                })
            })
        })
        
        function origin(filesize, filename){
            // 移動端圖片壓縮處理
            plus.io.resolveLocalFileSystemURL(path, function(entry) {
                var local = entry.toLocalURL();        // 獲取本地地址
                // 圖片壓縮處理
                _this.dealImage(local, delobj, function(base) {
                    fileObj.now.base64Char = base;
                    fileObj.now.base64Length = base.length;
                    fileObj.now.fileSize = (base.length / 1024).toFixed(2) + "KB";
                    fileObj.origin.fileSize = (filesize / 1024).toFixed(2) + "KB";
                    fileObj.origin.filePath = local;
                    fileObj.fileName = filename;
                    cb(fileObj);
                })
            })
        }
    }, function(err) {
        console.log("獲取相片錯誤：" + err.message);
    }, {
        resolution: res,
        format: fmt
    })
}


/**
 * 
 * @param {Object} del
 *         需要直接處理的參數對象
 *             例如： "{width : 100, height: 100, quality : 0.5}"  
 *                 默認處理按比例處理，只要設置width或height，quality默認0.7
 * @param {Object} options
 *         圖片處理的屬性  處理文件格式 multiple 選擇多張文件進行批量處理
 *             例如：{filter : "image", multiple : true}
 * @param {Object} callback
 *         回調函數返回相應的參數
 *             返回對象數組，包括原始文件大小等內容
 *             例如：obj[0].origin.fileSize, obj[0].now.fileSize,obj[0].now.filePath等
 */
App.prototype.delGalleryImg = function (del, options, callback){
    var _this = this;
    var fileObj = {
        now : {},
        origin : {}
    }
    plus.gallery.pick(function(eve){
        if(options.multiple){
            delmultiple(eve);        // 多張照片處理回調函數
        } else {        
            delsingle(eve);        // 單張圖片處理回調函數
        }
    },function(err){
        console.log(err.message)
    }, {
        filter : options.filter || "image",
        multiple : options.multiple || false
    })
    
    // 處理多張圖片
    function delmultiple(eve){
        for(var i = 0, len = eve.files.length; i < len; i++){
//            console.log(i +" : "+ eve.files[i])
            (function(i, len){        // 因為此處為異步操作，需要自動執行函數傳入index的值到函數中進行自動執行
                retValue(eve.files[i], function(filepro){
//                    console.log(JSON.stringify(filepro))
                    inner(i, len, filepro);
                })
                
            })(i, len)
        }
        
        var cbobj = [];            // 暫存json字符串話的字符數組
        function inner(index, len, result){
//            console.log(index +"  "+ JSON.stringify(result));
            cbobj.push(JSON.stringify(result));                    // 此處如果直接將對象push到數值中，會存在相同的對象元素（不知為什么），所以進行了一個
            if(cbobj.length == len){
                var tempobj = [];        // 解析字符串 后回調該對象數組
                for(var i = 0; i < len; i++){    // 遍歷所有的文件進行字符串解析
                    var obj = JSON.parse(cbobj[i])        
                    tempobj[i] = obj;
                }
                callback(tempobj);        // 回調數組對象
            }
        }
    }
    // 處理單張圖片
    function delsingle(path){
        // 調用內部函數回調函數進行外部單一圖片選擇處理屬性回調
        retValue(path, function(filepro){
            callback(filepro);
        });
    }
    
    function retValue(path, cb){
        plus.io.requestFileSystem(plus.io.PRIVATE_WWW, function(fs){
            fs.root.getFile(path, {create: true}, function(fileEntry){
                fileEntry.file(function(file){
    //                    console.log("原始文件大小：" + file.size / 1024 +"KB   filename:"+file.name);
                    origin(file.size, file.name);
                })
            })
        })
        // 回調函數
        function origin(filesize, filename){
            // 移動端圖片壓縮處理
            plus.io.resolveLocalFileSystemURL(path, function(entry) {
                var local = entry.toLocalURL();        // 獲取本地地址
                // 圖片壓縮處理
                _this.dealImage(local, del, function(base) {
                    fileObj.now.base64Char = base;
                    fileObj.now.base64Length = base.length;
                    fileObj.now.fileSize = (base.length / 1024).toFixed(2) + "KB";
                    fileObj.origin.fileSize = (filesize / 1024).toFixed(2) + "KB";
                    fileObj.origin.filePath = local;
                    fileObj.fileName = filename;
                    cb(fileObj);
                })
            })
        }
    }
    
}

本例子是基於HBuilder開發，當遇到APP移動端 拍照上傳，相冊圖片壓縮上傳等，

　　不喜勿噴，希望有這方面學習的朋友多指點。