function getBase64Image(img) { 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 dataURL = canvas.toDataURL("image/jpeg"); return dataURL; // return dataURL.replace("data:image/png;base64,", ""); } var base64 = getBase64Image(resImg);
同一张图片，这两者获取到的字符串大小不一样，但图片质量我是分辨不出什么差别。
比如一个2M的图片，通过getBase64Image方法读到的字符串大小才64k，而src直接读取到的却是270k，各自生成的图片更小。一下分别是原图(2.2M)，base64(48k),src(202k)对应的图片。
getBase64Image通过canvas的toDataURL 获取到更小的base64字符串。
2.也可以在前端转换blob对象，再post到后端
function dataURItoBlob(dataUrl) { var byteString = atob(dataUrl.split(',')[1]); var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ab], { type: 'image/jpeg' }); }
3.不压缩的就直接装到formdata中，send到后台。
uploadFile: function (file) { console.log("开始上传"); var formdata = new FormData(); formdata.append(para.filebase, file);//这个名字要和mvc后台配合 var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", function (e) { var percentComplete = Math.round(e.loaded * 100 / e.total); para.onProgress(percentComplete.toString() + '%'); }); xhr.addEventListener("load", function (e) { para.uploadComplete(xhr.responseText); }); xhr.addEventListener("error", function (e) { para.uploadError(e); }); xhr.open("post", para.url, true); xhr.send(formdata); },
全部的代码：（包含压缩和上传以及demo）：