js 图片压缩和上传（base64转file）
1 // 文件上传成功 2 function compress(){ 3 var file = document.getElementById('file_cw').files[0]; 4 // 压缩图片需要的一些元素和对象 5 var reader = new FileReader(), 6 //创建一个img对象 7 img = new Image(); 8 reader.readAsDataURL(file); 9 // 文件base64化，以便获知图片原始尺寸 10 reader.onload = function(e) { 11 img.src = e.target.result; 12 }; 13 14 15 // base64地址图片加载完毕后执行 16 img.onload = function () { 17 // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来） 18 var canvas = document.createElement('canvas'); 19 var context = canvas.getContext('2d'); 20 21 // 图片原始尺寸 22 var originWidth = this.width; 23 var originHeight = this.height; 24 25 // 最大尺寸限制，可通过设置宽高来实现图片压缩程度 26 var maxWidth = 1200, 27 maxHeight = 1200; 28 // 目标尺寸 29 var targetWidth = originWidth, 30 targetHeight = originHeight; 31 // 图片尺寸超过300x300的限制 32 if(originWidth > maxWidth || originHeight > maxHeight) { 33 if(originWidth / originHeight > maxWidth / maxHeight) { 34 // 更宽，按照宽度限定尺寸 35 targetWidth = maxWidth; 36 targetHeight = Math.round(maxWidth * (originHeight / originWidth)); 37 } else { 38 targetHeight = maxHeight; 39 targetWidth = Math.round(maxHeight * (originWidth / originHeight)); 40 } 41 } 42 // canvas对图片进行缩放 43 canvas.width = targetWidth; 44 canvas.height = targetHeight; 45 // 清除画布 46 context.clearRect(0, 0, targetWidth, targetHeight); 47 // 图片压缩 48 context.drawImage(img, 0, 0, targetWidth, targetHeight); 49 /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/ 50 51 //压缩后的图片转base64 url 52 /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png'; 53 * qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/ 54 var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式 55 //downLoad(newUrl,file["name"]);// 测试下载图片质量 56 57 //调用 base64 转 file文件 58 var blob = dataURLtoBlob(newUrl);
var aasfile = blobToFile(blob, file["name"]);
var aafile = new File([aasfile], file["name"], { type: file["type"] });
60 61 formData.append('file', aafile); 62 return 63 $.ajax({ 64 url: "./upload.do", 65 type: "post", 66 data: formData, 67 async: false, 68 contentType: false, 69 processData: false, 70 dataType: "json", 71 mimeType: "multipart/form-data", 72 success: function (data) { 73 console.log(data); 74 js.showMessage("上传成功！"); 75 } 76 }); 77 78 }; 79 } 80 // 测试下载图片质量 81 function downLoad(content,fileName){ 82 var aEle = document.createElement("a");// 创建a标签 83 aEle.download = fileName;// 设置下载文件的文件名 84 aEle.href = content; 85 aEle.click();// 设置点击事件 86 87 } 88 //将base64转换为blob 89 function dataURLtoBlob(dataurl) { 90 var arr = dataurl.split(','), 91 mime = arr[0].match(/:(.*?);/)[1], 92 bstr = atob(arr[1]), 93 n = bstr.length, 94 u8arr = new Uint8Array(n); 95 while (n--) { 96 u8arr[n] = bstr.charCodeAt(n); 97 } 98 return new Blob([u8arr], { type: mime }); 99 }; 100 //将blob转换为file 101 function blobToFile(theBlob, fileName){ 102 theBlob.lastModifiedDate = new Date(); 103 theBlob.name = fileName; 104 return theBlob; 105 };
