html5 前端圖片處理（預覽、壓縮、縮放）

現在手機圖片是越來越大了，上傳圖片流量耗費巨大。同時預覽也是一個問題，所以利用HTML5 file和canvas來解決這個問題。

 

var upload = {
    _o: null,//對象id
    _auto: true,//是否自動上傳
    _yl: false,//預覽
    _ylFun: null,//預覽回調函數
    _ys: 100,//壓縮 （1-100）100不壓縮
    _sf: 100,//縮放（1-100）100不縮放

    img: null,
    mImg: null,

    init: function (o, auto, yl, ylFun, ys, sf) {
        this._o = o;
        if (auto != undefined) this._auto = auto;
        if (yl != undefined) this._yl = yl;
        if (ylFun != undefined) this._ylFun = ylFun;
        if (ys != undefined) this._ys = ys;
        if (sf != undefined) this._sf = sf;

        this.click();
    },
    click: function () {
        var o = document.getElementById(this._o);
        o.addEventListener('change', this.change, false);
    },
    change: function () {
        var oFile = this.files[0];
        var FileInfo = {
            name: oFile.name || oFile.fileName,
            type: oFile.type || oFile.fileType,
            size: oFile.size || oFile.fileSize,
            modTime: oFile.lastModified,
            blob: oFile
        };

        // Android下讀不到type信息，從文件名中解析    
        if (!FileInfo.type) {
            var ext = FileInfo.name.split(".").pop().toLowerCase();
            if (ext == 'jpg') { sFileType = 'image/jpeg'; }
            else { sFileType = 'image/' + ext;}
        }
        // 讀取文件大小、修改時間等信息    
        var rFilter = /^(image\/jpeg|image\/png|image\/gif|image\/bmp)$/i;
        if (!rFilter.test(FileInfo.type)) {
            return;//非圖片
        }

        var oImg = document.createElement('img');
        // 使用FileReader讀取
        var oReader = new FileReader();
        oReader.onload = function () {
            var sBase64 = this.result;
            // 部分Android下base64字符串格式不完整    
            if (window.gIsAndroid && sBase64.indexOf("data:image/") != 0) {
                sBase64 = sBase64.replace("base64,", FileInfo.type + ";base64,");
            }
            oImg.src = sBase64;
            upload.img = oImg;
            if (upload != 100) {
                upload.img = upload.compress(FileInfo.type);
            }
            if (upload._yl) {
                upload._ylFun(upload.img);
            }
            sBase64 = null;
        }
        oReader.readAsDataURL(oFile);
    },
    compress: function (mime_type) {
        var cvs = document.createElement('canvas');
        //naturalWidth真實圖片的寬度
        var w = this.img.naturalWidth * this._sf / 100;
        var h = this.img.naturalHeight * this._sf / 100;
        cvs.width = w;
        cvs.height = h;

        var ctx = cvs.getContext("2d");
        ctx.drawImage(this.img, 0, 0, w, h);
        var newImageData = cvs.toDataURL(mime_type, this._ys / 100);
        var result_image_obj = new Image();
        result_image_obj.src = newImageData;
        return result_image_obj;
    }
};

 

 

html代碼

    <input type="file" id="upload" />

    <script src="js/zepto.min.js"></script>
    <script src="js/upload.js"></script>
    <script type="text/javascript">
        $(function () {
            upload.init('upload', false, true, function (e) {
                $('#upload).before(e);
            },100,50);
        });
    </script>