js 预处理用户上传图片

浏览数：41 / 时间：2015年06月09日

前几个月闲得无聊写得一段代码，没想最近刚好用上了，在硬盘里翻了半天找回来，还没好好整理直接用上了
图片会处理成PNG，比jpg 大很多，最好判断一下用户上传的图片size 大到一定程度再决定是否使用该方法
最长边800*600像素的PNG一般在1M左右
大的 jpg 转换成尺寸小一点的图片可以一用，比如用户拍照上传的图片一般都在1M 到4M 之间，如果只是用作头像尺寸就可以缩小很多，1M甚至几M的图转换成几百K。

<!doctype html>
<html>
<head>
<title>test</title>
<script src="js/zepto-master/src/zepto.min.js"></script>
<script>

/*****

by cnblogs.com/ecalf

**/

var uploadImg = (function($){
    
    function fileUpLoader(config){
        if(typeof(config.field)==‘string‘){//input type=file
            config.field = document.getElementById(config.field);
        }
        if(typeof(config.viewPane)==‘string‘){//预览图
            config.viewPane = document.getElementById(config.viewPane);
        }
        if(typeof(config.uploadBtn)==‘string‘){//上传按钮
            config.uploadBtn = document.getElementById(config.uploadBtn);
        }
        
        this.afterSelectFile = config.afterSelectFile||function(){};
        
        this.maxSize = config.maxSize==undefined?4194304:(config.maxSize||0);//maxSize 0 不限制大小 
        
        this.field = config.field;
        this.viewPane = config.viewPane;
        this.uploadBtn = config.uploadBtn;
        if(config.uploadUrl){
            this.uploadUrl = config.uploadUrl;
        }
        if(typeof(config.afterUpload)==‘function‘){
            this.afterUpload = config.afterUpload;
        }
        if(Object(config.extParams)===config.extParams){
            this.extParams = config.extParams;
        }
        
        this.init();
    }
    fileUpLoader.prototype = {
        init:function(){
            this.domEvents();
            console.log(‘uploadfile init‘);
        },
        domEvents:function(){
            var host = this;

            if(host.field&&host.afterSelectFile){
                $(host.field).on("change",function(e){
                    host.afterSelectFile&&host.afterSelectFile(this);
                });
            }
            
            if(host.uploadBtn){
                $(host.uploadBtn).on(‘click‘,function(){
                    host.upload();
                });
            }
            
            
        },
        
        imgToDataURL:function(img,callback,frag){
            var databack={
                    status:true,
                    dataURL:‘‘,
                    callback:callback,
                    resolve:function(){
                        this.callback(this.dataURL);
                    }
                }
            
            
            var trans = function(pic){//canvas.toDataURL,context.getImageData 不能读取跨域图片
                pic.crossOrigin = "*";
                var cvs = document.createElement("canvas");
                document.body.appendChild(cvs);
                var ctx = cvs.getContext(‘2d‘);
                cvs.width = pic.width;
                cvs.height = pic.height;
                
                console.log(‘img size:‘,pic.width+‘px‘,pic.height+‘px‘);
                ctx.drawImage(pic,0,0,pic.width,pic.height);
                var dataURL = cvs.toDataURL();
                console.log(‘dataURL length:‘,dataURL.length)
                cvs = null;
                ctx = null;
                
                return dataURL;
            };
            
            if(!frag&&img.width&&img.height){ //img 加载完才能取出img的数据，如果在domReady 里面执行，图片未加载完会绘制出空白的 canvas
                console.log(‘trans directly‘);
                databack.dataURL = trans(img);
                databack.resolve();
                
            }else{//使用 图片的 natural size，img loaded后才能获得高宽
                databack.status = false;
                var pic = new Image();
                pic.crossOrigin = "*";
                pic.onload = function(e){
                    console.log(‘trans onload‘);
                    databack.dataURL = trans(e.target);
                    databack.status = true;
                    databack.resolve();
                    pic = null;
                };
                pic.src = img.src;
            }
            
            
            return databack;
        },
        
        dataURLToBlob:function(dataURL){
            console.log(dataURL.length)
            var type = dataURL.match(/data:(.+?);/);
            type = type?type[1]:‘image/png‘;
            var dataContent = dataURL.replace(/^.+,/,‘‘);
            dataContent = atob(dataContent);
            var dataCharCode = [];
            var i = 0;
            while(i<dataContent.length){
                dataCharCode[i] = dataContent.charCodeAt(i);
                i++;
            }
            var u8Arr = new Uint8Array(dataCharCode);
            return  new Blob([u8Arr],{type:type}); // you maybe use new BolbBuilder() in older browser
        
        },
        
        readURL:function (input,callback) {//创建预览图
            input = input||this.field;
            if (input.files && input.files[0]) {
                if(this.maxSize&&input.files[0].size > this.maxSize){
                    alert(‘文件大于‘+(this.maxSize/(1024*1024))+‘m，请重新上传‘);
                    return false;
                }
                
                var reader = new FileReader();
                reader.onload = function (e) {
                    callback&&callback(e.target.result);
                };
                var dataUrl = reader.readAsDataURL(input.files[0]);
                reader = null;
                return dataUrl;
            }
        },
        
        
    upload:function(fileConfig){
        var host = this;
        var formData = new FormData();
        var file,name,filename;
        if(!fileConfig){
            name = host.field.name;
             file = host.field.files[0];
             filename = host.field.value.split(/[/\\]/).pop()||"temp.png";
        }else{
            name = fileConfig.name;
             file = fileConfig.file;
             filename = fileConfig.filename||"temp.png";
        }
       
        if(!file){
            console.log(‘no file‘);
        }
        
        formData.append(name,file,filename);

        if(Object(host.extParams)===host.extParams){
            $.each(host.extParams,function(k,v){
                formData.append(k,v);
            });
        }
        
        $.ajax({
                url: host.uploadUrl,
                type: ‘POST‘,
                data: formData,
                async: true,
                dataType:‘json‘,
                cache: false,
                contentType: false,
                processData: false,
                timeout:45000,
                success: function (data,status, xhr) {
                    host.afterUpload&&host.afterUpload(data);
                    
                },
                error:function(xhr, errorType, error){
                    console.log(errorType, error);
                },
                complete:function(xhr, status){
                    console.log(‘post complete,status:‘,status);
                }
            });
       
        }//end upload
    };
    
    
    return {
        init:function(config){
            return new fileUpLoader(config);
        }
    };

})(Zepto);

$(document).ready(function(){
    upload = uploadImg.init({
        field:‘uploadimg‘,
        viewPane:‘viewPane‘, 
        uploadBtn:‘submitbtn‘,
        uploadUrl:‘yourimguploadurl.jsp‘,
        maxSize:0,
        afterUpload:function(resp){ },
        extParams:{uid:12}
    });
    
    
    window.onload = function(){
        var img = document.querySelector("img");    
        upload.imgToDataURL(img,function(DataURL){
            var blob = upload.dataURLToBlob(DataURL);
            console.log(blob);
        },true);
    };
    
    
    
    
    $("#uploadimg").on("change",function(){
        var file = this.files[0];
        if(!file){ return; }
        
        upload.readURL(this,function(dataURL){
            upload.viewPane&&(upload.viewPane.src = dataURL);
            var img = new Image();
            img.onload = function(){
                var img = document.querySelector("img");    
                upload.imgToDataURL(img,function(dataURL){
                    var blob = upload.dataURLToBlob(dataURL);
                    console.log(blob);
                },false);
            }
            img.src=dataURL;
            
        });
    });
        
    
    
    
});

</script>
</head>
<body>
<div>
<img id="viewPane" width="800" height="600"  src="img/1111.png" />
<form id="testform">
<!-- camera--照相机；camcorder--摄像机；microphone--录音 -->
<input id="uploadimg" type="file" accept="image/*" capture="camera" />
<input id="submitbtn" type="submit" />
</form>

</div>
</body>
</html>