let img = new image(); let dataURL; img.onload=function(){ var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); dataURL = canvas.toDataURL("image/jpeg"); } img.src="....";//图片url地址
上面是我们获取已知图片的base64编码。
1,创建image对象,
2,设置image的onload方法,
3,设置image的url地址
4,在onload方法里面,将图片绘制到canvas画布上,通过画布的toDataURL方法获取图片的base64地址。
var files=finput.files; let dataURL; f(files.length>0){ var fe=files[0]; let type = fe.type; if(type != 'image/jpg'&&type != 'image/jpeg'&&type != 'image/png'&&type != 'image/bmp'){ tips('图片格式不正确,请重新上传!'); return; } var reader=new FileReader(); reader.onload=()=>{ dataURL=reader.result; }; reader.readAsDataURL(fe); }
这种方式获取的图片base64编码格式跟选择的图片类型相关。
如果想要指定base64编码中图片的格式是png还是jpg,可以结合第一种方式来实现,即将reader.result作为img.src来加载图片。这样的做法还可以达到预览图片的功能。