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