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'); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。