HTML5 JS压缩图片并获取图片BASE64编码上传
本文实例为大家分享了HTML5JS压缩图片，并获取图片BASE64编码上传的方法，供大家参考，具体内容如下
基本过程
1)调用FileReader的reader.readAsDataURL(img);方法,在其onload事件中,将用户选择的图片读入Image对象.
2)在image对象的onload事件中,通过canvas的canvas.getContext('2d')的drawImage方法,将Image改变大小绘制到canvas上.
3)通过canvas.toDataURL("image/jpeg",0.1);方法,将图片变成base64字符串,传入服务端.
varvueImg=newVue({
el:"#divCarImages",
data:{model:{carId:'@carId',imageTitle:'',img64:''},images:[]},
methods:{
imageHandle:function(){
varfup=$("#fileImg")[0];
varimg=fup.files[0];
varimage=newImage();
varcanvas=$("#canvas")[0];//document.createElement("canvas");
varctx=canvas.getContext('2d');
image.onload=function(){
varw=image.naturalWidth,
h=image.naturalHeight;
vartoSize=400;
canvas.width=toSize;
canvas.height=toSize;
varw2=toSize,h2=toSize;
if(w>h){
h2=h/w*toSize;
}else{
w2=w/h*toSize;
}
ctx.drawImage(image,0,0,w,h,0,0,w2,h2);
}
//判断是否图片
if(!img){
return;
}
//判断图片格式
if(!(img.type.indexOf('image')==0&&img.type&&/\.(?:jpg|png|gif)$/.test(img.name))){
alert('图片只能是jpg,gif,png');
return;
}
varreader=newFileReader();
reader.onload=function(e){//readeronloadstart
varurl=reader.result;
image.src=url;
}//readeronloadend
reader.readAsDataURL(img);
}
}
});
functionuploadImg(){
varcanvas=$("#canvas")[0];
vueImg.model.img64=canvas.toDataURL("image/jpeg",0.1);
//$("#testMsg").html(imgData.length);
//ajax上传图片
$.post("@Url.Content("~/AliOss/SaveCarImage")",vueImg.model,function(ret){
parseAjaxData(data,function(model){
console.log(model.Path);
alert(model.Path);
$('#showimg').html('<imgsrc="'+model.Path+'">');
})
},'json');
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。