有两个需要注意的点：
var base64 = canvas.toDataURL('image/jpeg', quality);
1、其中在输出图片base64时，可选的格式除了jpeg外还有png，webp等，从图片质量的角度看推荐使用webp，但webp在没有img标签时不能直接通过浏览器打开。
2、通过canvas输出base64格式的图片不能直接通过表单上传到服务器，还需要多做一步转化成Blob.
下面是完整的代码
HTML代码
<div class="upload"><div id="uploaded" class="uploaded"><!-- <img id="imgPreview" src="images/avatar.png" alt=""> --><a href="javascript:;"><input id="files" type="file" οnchange="readFile(this)" accept="image/*"/></a></div><p>上传照片，请注意隐藏图片中的隐私信息</p>
</div>
JS代码
var imgUrl = [];var imgId = 0;function readFile(obj) {// show loadingvar html = '<span class="img loading" ><img src="/images/app/loading.gif" alt=""></span>';$("#uploaded").append(html);imgloading = true;var file = obj.files[0];//判断类型是不是图片if (!/image\/\w+/.test(file.type)) {alert("请确保文件为图像类型");return false;}var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) {dealImage(this.result, {width: 200}, function (base) {var blob = convertBase64UrlToBlob(base);var formData = new FormData();formData.append('files', blob);$.ajax({type: "POST",url: "/complaint/saveImg",data: formData,contentType: false,processData: false,dataType: 'json',success: function (data) {if (data.status == 1) {imgUrl.push(data.imgUrl);imgId += 1;var html = '<span class="img" id="' + imgId + '"><a class="del" onClick=\"delImg(\'' + data.imgUrl + '\',' + imgId + ');\"></a><img src="' + base + '" alt=""></span>';try {$("#uploaded").find('.loading').eq(0).remove();} catch (e) {}$("#uploaded").append(html);} else {alert('上传失败')try {$("#uploaded").find('.loading').eq(0).remove();} catch (e) {}}imgloading = false;return;},error:function () {alert('上传失败');try {$("#uploaded").find('.loading').eq(0).remove();} catch (e) {}imgloading = false;}});});}}/*** 图片压缩，默认同比例压缩* @param {Object} path* pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径* @param {Object} obj* obj 对象 有 width， height， quality(0-1)* @param {Object} callback* 回调函数有一个参数，base64的字符串数据*/function dealImage(path, obj, callback) {if (path.length <= 640 * 1024) {callback(path);return;}var img = new Image();img.src = path;img.onload = function () {var that = this;// 默认按比例压缩var w = that.width,h = that.height;var quality = 0.8; // 默认图片质量为0.7//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 创建属性节点var anw = document.createAttribute("width");anw.nodeValue = w;var anh = document.createAttribute("height");anh.nodeValue = h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);ctx.drawImage(that, 0, 0, w, h);//计算压缩质量比quality = (640 * 1024) / path.length;// quality值越小，所绘制出的图像越模糊var base64 = canvas.toDataURL('image/jpeg', quality);// 回调函数返回base64的值callback(base64);}}/*** 将以base64的图片url数据转换为Blob* @param urlData* 用url方式表示的base64图片数据*/function convertBase64UrlToBlob(urlData) {var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], {type: mime});}//删除图片function delImg(picUrl, imgId) {var index = imgUrl.indexOf(picUrl);if (index >= 0) {imgUrl.splice(index, 1);$("#" + imgId).remove();}}