jquery实现input中的图片获取以及运用canvas进行压缩,最后变成base64字符串

2019-04-15 15:41发布

1.关键的就是一个函数:function f(){//先从html页面中获得input组件元素,假设组件的id叫picvar in=document.getElementById("pic");//然后获得上传的图片,我们这里假设只上传了一个图片var pic=in.files[0];//设置文件读取器var reader=new FileReader();//将图片读成base64字符串reader.readAsDataURL(pic);//执行reader.onload的回调函数reader.onload=function(ev){//新建一个图片对象var image=new Image();//设置image的src参数image.src=ev.target.result;//执行image.onload的回调函数image.onload=function(){//建立canvas相关对象var canvas=document.createElement('canvas');var context=canvas.getContext('2d');//设置canvas的长宽,这里假设长宽都是300像素canvas.width=300;canvas.height=300;//进行绘制context.drawImage(image,0,0,300,300);//提取最后的base64字符串var img=canvas.toDataURL("image/jpeg",0.9);//接下来我们就可以调用ajax将img作为图片字符串对象传递到后台了

}
}
}