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);
59 var aasfile = blobToFile(blob, file["name"]);
60 var aafile = new File([aasfile], file["name"], { type: file["type"] });
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 };