<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>图片压缩</title>
<style>
body { margin:0; padding:0; }
html { font-size:62.5%; }
.imgzip { padding:1em; }
.imgzip .itm { padding-bottom:1em; word-break:break-all; font-size:1.2rem; line-height:1.5em; }
.imgzip .itm .tit { margin-bottom:.5em; background-color:#e71446; color:#FFF; padding:.5rem 1rem; border-radius:3px; }
.imgzip .itm .cnt { padding:1rem; }
.imgzip .itm .cnt img { display:block; max-width:100%; }
.imgzip textarea { width:100%; height:20em; }
</style>
</head>
<body>
<script src="/jquery-1.8."></script>
<input type="file" accept="image/*;capture=camera" class="input">
<div class="imgzip"></div>
<script>
('DOMContentLoaded', init, false);
function init() {
var u = new UploadPic();
({
input: ('.input'),
callback: function (base64) {
$.ajax({
url:"{:U('upload')}",
data:{str:base64,type:},
type:'post',
dataType:'json',
success:function(i){
alert();
}
})
},
loading: function () {
}
});
}
function UploadPic() {
= 0;
= 0;
= 0;
= 0;
= 0;
= 0;
= 0;
= 0;
= 0;
= null;
= '';
= '';
= null;
= null;
= {};
= '';
= function () {};
= function () {};
}
= function (options) {
= || 800;
= || 600;
= || 3 * 1024 * 1024;
= ;
= {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'};
= || function () {};
= || function () {};
this._addEvent();
};
/**
* @description 绑定事件
* @param {Object} elm 元素
* @param {Function} fn 绑定函数
*/
._addEvent = function () {
var _this = this;
function tmpSelectFile(ev) {
_this._handelSelectFile(ev);
}
('change', tmpSelectFile, false);
};
/**
* @description 绑定事件
* @param {Object} elm 元素
* @param {Function} fn 绑定函数
*/
._handelSelectFile = function (ev) {
var file = [0];
=
// 如果没有文件类型，则通过后缀名判断（解决微信及360浏览器无法获取图片类型问题）
if (!) {
= [(/\.([^\.]+)$/i)[1]];
}
if (!/image.(png|jpg|jpeg|bmp)/.test()) {
alert('选择的文件类型不是图片');
return;
}
if ( > ) {
alert('选择文件大于' + / 1024 / 1024 + 'M，请重新选择');
return;
}
= ;
= ;
= ;
= ;
this._readImage(file);
};
/**
* @description 读取图片文件
* @param {Object} image 图片文件
*/
._readImage = function (file) {
var _this = this;
function tmpCreateImage(uri) {
_this._createImage(uri);
}
();
this._getURI(file, tmpCreateImage);
};
/**
* @description 通过文件获得URI
* @param {Object} file 文件
* @param {Function} callback 回调函数，返回文件对应URI
* return {Bool} 返回false
*/
._getURI = function (file, callback) {
var reader = new FileReader();
var _this = this;
function tmpLoad() {
// 头不带图片格式，需填写格式
var re = /^data:base64,/;
var ret = + '';
if ((ret)) ret = (re, 'data:' + _this.mime[_this.fileType] + ';base64,');
callback && callback(ret);
}
= tmpLoad;
(file);
return false;
};
/**
* @description 创建图片
* @param {Object} image 图片文件
*/
._createImage = function (uri) {
var img = new Image();
var _this = this;
function tmpLoad() {
_this._drawImage(this);
}
= tmpLoad;
= uri;
};
/**
* @description 创建Canvas将图片画至其中，并获得压缩后的文件
* @param {Object} img 图片文件
* @param {Number} width 图片最大宽度
* @param {Number} height 图片最大高度
* @param {Function} callback 回调函数，参数为图片base64编码
* return {Object} 返回压缩后的图片
*/
._drawImage = function (img, callback) {
= ;
= ;
= ;
= ;
= ( / ).toFixed(2);
if ( > ) {
= ;
= ( / );
}
if ( > ) {
= ;
= ( * );
}
= ('canvas');
var ctx = ('2d');
= ;
= ;
(img, 0, 0, , , 0, 0, , );
(());
(0, 0, , );
= 0;
= 0;
= null;
};
</script>
</body>
</html>