思路:
1.如果有图片路径我们可以直接将图片路径转为image,再通过canvas压缩,再转为base64编码图片,再转为blob文件就可以传给后台了。
src => image => 压缩 => base64 => blob
2.如果我们从input拿到的图片没有路径,先获取input拿到的文件的路径,然后跟第一步一样。
file => src => image => 压缩 => base64 => blob
实现:
html:
<div id="img-box"></div>
<input type="file" id="imgfile"/>
<button onclick="getfile()">压缩</button>
js
var imgbox=document.getElementById("img-box");
//压缩按钮的点击事件
function getfile(){
//我们先拿到input的文件
var fileList = document.getElementById("imgfile").files[0];
//打印压缩前的图片信息
console.log('压缩前',fileList);
//获取文件的url
var reader= new FileReader();
reader.readAsDataURL(fileList);
// 当文件读取成功时执行的函数
reader.onload=function(e){
//开始压缩(有图片路径可以不执行上面的直接传路径)
yasuo(this.result);//这里参数是图片路径this.result为图片的base64地址
//预览压缩前图片
var img1 = document.createElement("img");
img1.src=this.result;
imgbox.appendChild(img1);
}
}
//压缩启动事件
function yasuo(img){
//先转成image对象
var image = new Image();
image.crossOrigin = '';
image.src = img;
image.onload = function(){
//先将images通过canvas压缩再转成base64;
var base64 = getBase64Image(image);
//再将base64转化为bold
var img2 = convertBase64UrlToBlob(base64);
//打印压缩后的图片信息
console.log('压缩后',img2);
//预览压缩后的图片
var img2 = document.createElement("img");
img2.src=base64.dataURL;
imgbox.appendChild(img2);
}
}
/*
* 图片的路径地址 转换成base64编码 如下代码:
*/
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
//这里选择压缩的比例
var canvaswidth = img.width*0.1;
var canvasheight = img.height*0.1;
canvas.width = canvaswidth;
canvas.height = canvasheight;
ctx.drawImage(img, 0,0,img.width,img.height,0,0, canvaswidth, canvasheight);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return {
dataURL: dataURL,
type: "image/"+ext
};
}
/**
* 将以base64的图片url数据转换为Blob
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(base64){
var urlData = base64.dataURL;
var type = base64.type;
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 : type});
}
//如果需要判断文件大小 ,图片大小验证同意通过比对bold文件的size属性进行对比size是字节除以1024为kb 这里暂时不需要
function verificationPicFile(file) {
var fileSize = file.size;
var fileMaxSize = 500;//500kb
var size = fileSize / 1024;
if (size > fileMaxSize) {
alert("文件大小不能大于500kb!");
return false;
}else if (size <= 0) {
alert("文件大小不能为0M!");
return false;
}else{
console.log(fileSize);
//向后台上传文件(可以用formdata的方式上传哦)
}
}
TIM图片20190710181141.png
可以看到压缩前图片大小为11230 而压缩后只有4135