1 function ImgToBase64(file, maxLen, callBack) { 2var img = new Image(); 3 4var reader = new FileReader();//读取客户端上的文件 5reader.onload = function () { 6 var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload， 7 img.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片 8}; 9img.onload = function () {10 //生成比例11 var width = img.width, height = img.height;12 //计算缩放比例13 var rate = 1;14 if (width >= height) {15 if (width > maxLen) {16 rate = maxLen / width;17 }18 } else {19 if (height > maxLen) {20 rate = maxLen / height;21 }22 };23 img.width = width * rate;24 img.height = height * rate;25 //生成canvas26 var canvas = document.createElement("canvas");27 var ctx = canvas.getContext("2d");28 canvas.width = img.width;29 canvas.height = img.height;30 ctx.drawImage(img, 0, 0, img.width, img.height);31 var base64 = canvas.toDataURL('image/jpeg', 0.9);32 callBack(base64);33};34reader.readAsDataURL(file);35 }
调用方式：
1 $(function () { 2 $("#img").change(function () { 3 var file = $(this)[0].files[0];//获取input file控件选择的文件 4 5 ImgToBase64(file, 720, function (base64) { 6 $("#img1")[0].src = base64;//预览页面上预留一个img元素，载入base64 7 $("#img1")[0].width = 300;//设定宽高，不然会自动按照压缩过的图片宽高设定，有可能超出预想的范围。
//直接利用ajax上传base64到服务器，完毕 8 }); 9 })10})
