方法一
不改变图片大小。
function ImgToBase64(file, callBack) { var reader = new FileReader(); var AllowImgFileSize = 6*1024*1024; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败 var imgUrlBase64; var size = file.size; if (file) { //将文件以Data URL形式读入页面 imgUrlBase64 = reader.readAsDataURL(file); reader.onload = function (e) { //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分(可选可不选,需要与后台沟通) if (AllowImgFileSize != 0 && AllowImgFileSize < size) { bootbox.alert("上传失败,请上传不大于5M的图片"); return; }else{ //执行上传操作 callBack(reader.result); } } } }
方法二
可以限制图片大小
function ImgToBase64(file, maxLen, callBack) { var img = new Image(); var reader = new FileReader();//读取客户端上的文件 reader.onload = function () { var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload, img.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片 }; img.onload = function () { //生成比例 var width = img.width, height = img.height; //计算缩放比例 var rate = 1; if (width >= height) { if (width > maxLen) { rate = maxLen / width; } } else { if (height > maxLen) { rate = maxLen / height; } }; img.width = width * rate; img.height = height * rate; //生成canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); var base64 = canvas.toDataURL('image/jpeg', 0.9); callBack(base64); }; reader.readAsDataURL(file); }