小石头原创,转载请注明出处,谢谢~!
var jsoncode=(function(){
/* imgzip:图片压缩,
* json:
* file :必须。file类型的input按钮的选择器(#id,.class,input[type=file]...)
* fileStyle:可选。是否设置按钮的样式。默认为false
* widt :可选。被压缩后的图片宽度
* quality :可选。被压缩后的图片质量
* type :可选。图片格式(仅支持png-无压缩,jpeg/jpg,可压缩)
* error :可选。错误信息
* success :可选。成功信息,包图片流等。返回值是一个对象
*
imgzip({
file :'#fileid',
fileStyle:true,
width :'100'|100|'50%',
quality :'0.3'|0.3,
error :function(error){
console.log(error);
},
success :function(data){
console.log(data);
}
});
返回值:
Object{
name: "32", 原始图片的名称,不包含后缀
nameSuffix: ".jpg", 原始图片的后缀名
type: "image/jpeg", 原始图片类型
size: 183844, 原始图片大小
width: 590 原始图片宽度
height: 470, 原始图片高度
url: "data:image/jpeg;base64,...", 原始图片路径
flow: "", 原始图片流
img: imgDom, 原始图片(保存在img中)
quality: 0.1, 图片压缩质量
newType: "image/jpeg", 压缩后图片格式
newWidth: 590, 压缩后图片高度
newHeight: 470, 压缩后图片高度
newUrl: "data:image/jpeg;base64,...", 压缩后图片路径
newFlow: "", 压缩后图片流
canvas: canvasDom, 压缩后图片(保存在canvas中)
localTimeStamp: 1413531845, 本地时间戳
}
*/
this.imgzip=function(obj){
//获取file按钮
if (obj.file) {
imgzip.file=obj.file;
}else{
return console.log('selector is null');
}
//获取文件按钮对象
var input=document.querySelector(imgzip.file);
//给文件按钮添加accept属性值:image/*(表示只能选择图片类型的文件)
input.setAttribute('accept','image/*');
var file=null;
//是否重置input样式
imgzip.fileStyle=obj.fileStyle||false;
if (!imgzip.fileStyle) {
file=input;
}else{
//克隆input
file=input.cloneNode(true);
//创建父盒子模型
var label=document.createElement('label');
//获取属性placeholder的值,作为按钮名称
var text=file.getAttribute('placeholder')||'选择图片';
//创建文本节点
textNode=document.createTextNode(text);
//将克隆的input添加到盒子中
label.appendChild(file);
label.appendChild(textNode);
//将原来的input替换为带有盒子div的input
input.parentNode.replaceChild(label,input);
//设置盒子class
label.setAttribute('class','fileInput');
//定义盒子样式
var style=document.createElement('style');
style.setAttribute('type','text/css');
document.querySelector('head').appendChild(style);
style.innerHTML='.fileInput{color:#fff;text-align:center;line-height:32px;font-size:14px;border-radius:2px;cursor:pointer;display:inline-block;width:100px;height:32px;background-color:rgb(56,121,217);}';
style.innerHTML+='.fileInput input[type=file]{width:100%;display:none;}';
}
//接收错误信息
imgzip.error=obj.error||function(){};
//返回图片信息
imgzip.success=obj.success||function(){};
//获取用户图片格式
if (/png/.test(obj.type)) {
imgzip.type='image/png';
}else{
imgzip.type='image/jpeg';
}
//获取用户要设置的图片宽度
imgzip.width=obj.width||null;
//获取图片压缩比例
if (parseFloat(obj.quality)) {
imgzip.quality=parseFloat(obj.quality);
}else{
imgzip.quality=0.9;
}
console.log(imgzip.quality);
//判断选择器是否正确
if (file==null) {
imgzip.error(fileSelector+' is null');
return false;
}else if(file.type!='file'){
imgzip.error(fileSelector+' is not file');
return false;
}else{
file.addEventListener('change',this.read,false);
}
}
//读取文件流
this.read=function(event){
//读取到的文件
var file=this.files[0];
//当取消选择的图片时处理错误
if (file===undefined)return false;
//返回的文件对象
var fileobj={};
//获取图片类型
fileobj.type=file.type;
//获取图片名称
fileobj.name=file.name.substring(0,file.name.lastIndexOf('.'));
//后缀名
fileobj.nameSuffix=file.name.substring(file.name.lastIndexOf('.'),file.name.length);
//获取图片大小
fileobj.size=file.size;
//图片新格式
fileobj.newType=imgzip.type;
//获取图片压缩质量
fileobj.quality=imgzip.quality;
//创建图片流对象
var reader = new FileReader();
reader.readAsDataURL(file);
reader.οnerrοr=function(){
console.log(reader.error)
}
//图片加载完成时获取信息
reader.οnlοad=function(e){
//时间戳
var strTimeStamp=''+e.timeStamp;
strTimeStamp=strTimeStamp.substring(0,strTimeStamp.length-3);
fileobj.localTimeStamp=parseInt(strTimeStamp);
//获取base64文件流
fileobj.url=reader.result;
//获取纯图片二进制流
fileobj.flow=reader.result.replace('data:'+fileobj.type+';base64,','');
//创建img对象
var img=new Image();
//获取img内容
img.src=fileobj.url;
fileobj.img=img;
//获取图像大小
fileobj.width=img.width;
fileobj.height=img.height;
//图片宽高比例 宽/高
var scale=img.width/img.height;
//图像新大小
if (imgzip.width==null) {
fileobj.newWidth=img.width;
fileobj.newHeight=img.height;
}else if (/%$/.test(imgzip.width)){
var percent=parseInt(imgzip.width.replace(/%$/,''));
fileobj.newWidth=(img.width*percent)/100;
fileobj.newHeight=(img.width*percent)/(scale*100);
}else{
fileobj.newWidth=imgzip.width;
fileobj.newHeight=imgzip.width/scale;
}
//创建画布
var canvas=document.createElement('canvas');
//确定画布的宽高
canvas.width=fileobj.newWidth;
canvas.height=fileobj.newHeight;
//创建二维空间
var cxt=canvas.getContext('2d');
//将图像画到画布上
cxt.drawImage(img, 0, 0, fileobj.newWidth, fileobj.newHeight);
fileobj.canvas=canvas;
//获取新图像的路径
fileobj.newUrl=canvas.toDataURL(fileobj.newType, fileobj.quality);
//获取新的图片流媒体
fileobj.newFlow=fileobj.newUrl.replace('data:'+fileobj.newType+';base64,','');
//返回fileobj对象
return imgzip.success(fileobj);
}
}
return this;
})(jsoncode);
window.jsoncode=jsoncode;