ALiXiaoNa

方法一

不改变图片大小。

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);
	}