js 预处理用户上传图片
前几个月闲得无聊写得一段代码，没想最近刚好用上了，在硬盘里翻了半天找回来，还没好好整理直接用上了
手机用户拍照上传的图片一般都在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,type,typecallback,frag){ type = type||'image/png';
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(type); 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, maybe canvas.toBlob() is better for image }, 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,'image/jpeg',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,'image/jpeg',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>
http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios
ios 下 canvas 的 drawImage 存在扭曲 bug （似乎是像素过大时出现），修复方法如下
/** 修复 ios 下 canvas drawImage 函数的 画面扭曲BUG
* Detecting vertical squash in loaded image.
* Fixes a bug which squash image vertically while drawing into canvas for some images.
* This is a bug in iOS6 devices. This function from CodeGo.net
*
*/
function detectVerticalSquash(img) {
var iw = img.naturalWidth, ih = img.naturalHeight;
var canvas = document.createElement('canvas');
canvas.width = 1;
canvas.height = ih;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
var data = ctx.getImageData(0, 0, 1, ih).data;
// search image edge pixel position in case it is squashed vertically.
var sy = 0;
var ey = ih;
var py = ih;
while (py > sy) {
var alpha = data[(py - 1) * 4 + 3];
if (alpha === 0) {
ey = py;
} else {
sy = py;
}
py = (ey + sy) >> 1;
}
var ratio = (py / ih);
return (ratio===0)?1:ratio;
}
/**
* A replacement for context.drawImage
* (args are for source and destination).
* fixed: set height as height/vertSquashRatio
*/
function drawImageIOSFix(ctx, img, sx, sy, sw, sh, dx, dy, dw, dh) {
var vertSquashRatio = detectVerticalSquash(img);
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh / vertSquashRatio);
}
IOS 系统 safari 浏览器上开发 应注意的问题：
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15
