前几个月闲得无聊写得一段代码,没想最近刚好用上了,在硬盘里翻了半天找回来,还没好好整理直接用上了
手机用户拍照上传的图片一般都在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

js 预处理用户上传图片的更多相关文章

  1. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  2. Headroom.js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

  3. js记录用户在网站的浏览记录和停留时间

    by weber开发者 from http://weber.pub/ 本文地址: http://weber.pub/js记录用户行为浏览记录和停留时间/163.html 问题 公司想统计一个用户从进入 ...

  4. JS验证用户真实姓名

    发布:thebaby   来源:脚本学堂     [大 中 小] 本文分享下,使用js代码验证用户真实姓名的方法,有需要的朋友不妨参考下,希望对你有一定的帮助. 原文地址:http://www.jbx ...

  5. js记录用户行为浏览记录和停留时间(转)

    演示地址:http://weber.pub/demo/160902/test.html 测试源码下载:http://pan.baidu.com/s/1nvPKbSP 密码:r147 解决问题所使用的知 ...

  6. ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传,支持 ie6-ie10

    /* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...

  7. js判断用户是客户端还是移动端

    js判断用户是客户端还是移动端 Javascript 判断客户端是否为 PC 还是手持设备,有时候项目中需要用到,很方便的源生检测,方法一共有两种   1.第一种: function IsPC() { ...

  8. Vue.Js的用户体验优化

    一次基于Vue.Js的用户体验优化   一.写在前面 半年以前,第一次在项目上实践VueJs,由于在那之前,没有Angular,avalon等框架的实践经验,所以在Vue的使用上,没有给自己总结出更多 ...

  9. JS获取用户的Ip地址

    在网站中通常需要获取使用者的ip地址,获取抵制的方式有很多,这里就简单介绍一下js获取用户ip地址 /*使用的新浪的ip查询api,根据返回的数据进行判断*/ <script src=" ...

随机推荐

  1. IIS服务器下做301永久重定向设置方法

    实现方法如下: 1.新建一个站点,对应目录如E:\wwwroot\301web.该目录下只需要1个文件,即index.html或者加个404.htm.绑定要跳转的域名,如图: 2.在IIS中选中刚才我 ...

  2. NET Office 组件Spire

    高效而稳定的企业级.NET Office 组件Spire   在项目开发中,尤其是企业的业务系统中,对文档的操作是非常多的,有时几乎给人一种错觉的是"这个系统似乎就是专门操作文档的" ...

  3. Oracle之虚拟索引

    一.引言 DBA在日常维护管理数据库进行低性能SQL分析时,有时候需要通过创建索引对SQL进行优化,但有些时候我们创建的索引是否能用到?这个只能创建以后才能看出效果,但是在实际工作中,特别是对大表创建 ...

  4. web项目设计中框架的数据流

    这张图虽然简单,但是很好的说明了一个web框架,需要实现那些模块. 图片来自 <Go Web编程>

  5. 通过YAJL生成json语句

    这里主要介绍的是怎样通过yajl生成一个json语句.方法通过代码就能够非常清楚的看到了,只是这里仅仅加入了字符串. 假设须要加入其它类型的,能够查考yajl的手冊,调用其它函数进行加入. /* * ...

  6. centos文件系统变为只读的解决处理

    简单粗暴:重启 Linux系统重启或无故变为只读造成网站无法正常访问的简单临时的做法: 一. 1.mount: 用于查看哪个模块输入只读,一般显示为: /dev/hda1 on / type ext3 ...

  7. react+antdesign

    http://scaffold.ant.design/#/scaffolds/ng-alain http://scaffold.ant.design/#/scaffolds/react-redux-a ...

  8. java虚拟机的内存模型

    一.为什么要了解java虚拟机的内存模型 java虚拟机作为java代码运行的平台,是java技术的基石.了解java虚拟机的内存模型也就变得十分必要.它能帮助我们更好的了解java代码的运行机制,更 ...

  9. CEF 文件下载

    转载:https://blog.csdn.net/liuyan20092009/article/details/53819473?locationNum=6&fps=1 转载:https:// ...

  10. [C语言]数据类型与计算

    ------------------------------------------------------------------------------------------------- 实际 ...