先看一个小小的视图:
思路:canvas压缩
将图片样式抽象显示在 canvas上,然后通过 canvas.toDataURL方法得到base64字符串来实现压缩。
<form>
<p class="updataImg">
<span>上传图片:</span>
<!-- onchange="handleFiles(this)" -->
<input type="file" id="fileElem" multiple accept="image/*" capture="camera">
</p>
<div class="countBox">
<span>已成功上传:</span>
<span class="count">0</span>
<span>张图片</span>
</div>
<div id="fileList"></div>
<input type="button" value="提交">
</form>
<div class="mengban">
<div>
<p>提示</p>
<p>抱歉,只允许上传5张图片</p>
</div>
</div>
var fileInput = document.getElementById('fileElem');
var fileList = $("#fileList");
var count = 0;
function convertImgToBase64(url, callback, outputFormat){
var size = fileInput.files[0].size; //获取图片大小
var cutRate = 1;
if( size > 300*1024){ //判断图片大小大于300K,压缩;否则不压缩
cutRate = size/(300*1024);
}
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
var width = img.width;
var height = img.height;
// 按比例压缩4倍
var rate = (width<height ? width/height : height/width) / cutRate;
canvas.width = width*rate;
canvas.height = height*rate;
ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // web_kit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
//上传图片
$('#fileElem').bind('change',function(event){
var image = new Image();
var imageUrl = getObjectURL($(this)[0].files[0]);
convertImgToBase64(imageUrl, function(base64Img){
// base64Img为转好的base64,放在img src直接前台展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)
// base64转图片不需要base64的前缀data:image/jpg;base64 console.log(base64Img.split(",")[1]);
if( count < 5){
image.src = base64Img; //创建一个object URL,并不是你的本地路径
image.width = 100;
image.height = 100;
fileList.append(image);
$('.count').text(count+1);
}else{
$('.mengban').show();
setTimeout(function(){
$('.mengban').hide();
},2000);
}
count++;
});
event.preventDefault();
});
不压缩的本地预览:
window.URL = window.URL || window.webkitURL;
var fileElem = $("#fileElem"),
fileList = $("#fileList"),
count = 0;
function handleFiles(obj) {
var files = obj.files,
img = new Image();
if(window.URL){
//File API
img.src = window.URL.createObjectURL(files[0]); //创建一个object URL,并不是你的本地路径
img.width = 100;
img.height = 100;
img.onload = function(e) {
window.URL.revokeObjectURL(this.src); //图片加载后,释放object URL
}
if( count < 5){
fileList.append(img);
$('.count').text(count+1);
}else{
$('.mengban').show();
setTimeout(function(){
$('.mengban').hide();
},2000);
}
count++;
}
}