使用exif.js实现拍照上传并压缩旋转
1.先引入必须的文件
<script src="jquery.js"></script>
<script src="exif-2.3.0.js"></script>
<script src="pressImg.js"></script>
2.html代码
<input type="file" id="choose" accept="image/*">
<div id="box">
</div>
3.main.js文件实现拍照上传,加压缩旋转
var filechooser = document.getElementById("choose");
var maxsize = 512 * 1024;//1kb = 1024B(字节)
filechooser.onchange = function() {
var file = this.files[0];
EXIF.getData(file, function(){
EXIF.getAllTags(this);
EXIF.getTag(this, 'Orientation');
console.log("最初的file对象");
console.log(file);
var size = file.size;//获取图片大小
var reader = new FileReader();
reader.onload = function(){
var result = this.result;//base64图片字符串
var img = new Image();
img.src = result;
//如果图片大小小于等于512kb时,则直接上传
if (size <= maxsize) {
console.log("小于512kb时的上传");
console.log(img);
//旋转操作
obj.rotateImg(file,img);
img = null;
//上传
return;//完成结束
};
//图片加载完毕之后进行压缩,然后上传
if(img.complete) {
callback();
}else {
img.onload = callback;
};
function callback() {
var data = obj.pressImg(img);
console.log("压缩后的图片(base64字符串)");
//将压缩后的base64字符串重新转为file对象
var newimgFile = obj.convertBase64UrlToBlob(data);
console.log(newimgFile);
//上传
//完成后置空
img = null;
//在页面中展示图片(展示效果用)
var img1 = new Image();
img1.id="imgCover";
img1.src = data;
console.log(img1);
//旋转操作
obj.rotateImg(file,img1);
//最后展示
$("#box").html(img1);
};
};
reader.readAsDataURL(file);
});
};
4.核心文件:
var obj = {
/**
* 用于对图片进行压缩上传
*/
pressImg: function(img){//img指图片格式为base64字符串的图片
//用于压缩图片的canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
//瓦片canvas
var tCanvas = document.createElement("canvas");
var tctx = tCanvas.getContext("2d");
var initSize = img.src.length;
var width = img.width;
var height = img.height;
//如果图片大于四百万像素,计算压缩比并将大小压至400万以下
var ratio;
if((ratio = width * height / 4000000) > 1) {
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
//铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//如果图片像素大于100万则使用瓦片绘制
var count;
if ((count = width * height / 1000000) > 1) {
count = (Math.sqrt(count) + 1); //计算要分成多少块瓦片(计算平方根)
//计算每块瓦片的宽和高
var nw = (width / count);
var nh = (height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for (var i = 0; i < count; i++) {
for (var j = 0; j < count; j++) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
//进行最小压缩
var ndata = canvas.toDataURL('image/jpeg', 0.5);//改变这里的参数即可改变压缩率。(例如:0.1)
console.log('压缩前:' + initSize);
console.log('压缩后:' + ndata.length);
console.log('压缩率:' + (100 * (initSize - ndata.length) / initSize) + "%");
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
},
/**
* 用于将得到的base64位的字符串图片转化为file对象
*/
convertBase64UrlToBlob: function(urlData){
var bytes=window.atob(urlData.split(',')[1]);//去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
};
return new Blob( [ab] , {type : 'image/png'});
},
/*用于对图片进行旋转操作*/
rotateImg: function(imgFile,imgObj){
console.log(imgFile.exifdata.Orientation);
switch(imgFile.exifdata.Orientation){
case 8:
//需要向左旋转90度。
console.log($(imgObj));
$(imgObj).css("transform","rotate(-90deg)");
break;
case 3:
//需要向右旋转180度。
console.log($(imgObj));
$(imgObj).css("transform","rotate(180deg)");
break;
case 6:
//需要向右旋转90度。
console.log($(imgObj));
$(imgObj).css("transform","rotate(90deg)");
break;
case 1:
//不需要旋转
break;
}
}
}