一、图片上传，原图无压缩
1、用到的js和css（只为美规，可以不用）:jasny-bootstrap.css、jasny-bootstrap.js
2、、html代码
3、后台接收代码
四、图片压缩后上传
1、设置js脚本压缩
1 async function pushFrom(){
2 let file3 = document.getElementById('file').files[0];
3 if(file3 && '' != file3){
4 let base64 = await PromiseCompress(file);
5 var formData = new FormData(form);
6 formData.append("base64 ",base64 );
7
8 $.ajax({
9 type:'post',
10 url: "/alcms/workermonitor/siAlcWorkerMonitor/everydaymonitorsave",
11 processData:false,
12 contentType:false,
13 data: formData, //重点必须为一个变量如：data
14 success:function(data){
15
16 },
17 error:function(e){
20 }
21 })
25 ｝
27 }
28
29 //不对图片进行压缩
30 function directTurnIntoBase64(fileObj,callback) {
31 var r = new FileReader();
32 //转成base64
33 r.onload = function () {
34 imgBase64 = r.result;
35 // console.log(imgBase64);
36 callback(imgBase64)
37 }
38 r.readAsDataURL(fileObj);//转成base64格式
39 }
40
41 /* 异步压缩图片 */
42 async function PromiseCompress(fileObj) {
43 return new Promise(function (resolve, reject) {
44 compress(fileObj,function (imgBase64) {
45 resolve(imgBase64);
46 })
47 })
48 }
49
50
51 //对图片进行压缩
52 function compress(fileObj,callback) {
53 console.log('准备压缩的对象：'+fileObj);
54 if(!fileObj){
55 console.log('不压缩');
56 return;
57 }
58 if(typeof (FileReader) === 'undefined'){
59 console.log("当前浏览器内核不支持base64图片压缩")
60 directTurnIntoBase64(fileObj,callback);
61 }else{
62 try{var reader = new FileReader();
63 // 原图
64 var yimage = $('');
65 yimage.src = fileObj.result;
66 reader.onload = function (e) {var image = $('');
67 image.on('load',function () {
68 let imageNW = this.naturalWidth;
69 let imageNH = this.naturalHeight;
70 let compressRatia = 1;
71 if(imageNH > 800){
72 // 图片高大于800时等比例缩小到800以下
73 compressRatia = 800 / imageNH;
74 }else if(imageNW > 500){
75 // 图片宽大于500时等比例缩小到500以下
76 compressRatia = 500 / imageNW;
77 }
78 //定义画布大小,也就是图片压缩之后的像素
79 var squareW = Number(imageNW * compressRatia).toFixed(0);
80 var squareH = Number(imageNH * compressRatia).toFixed(0);
81 var canvas = document.createElement('canvas'),
82 context = canvas.getContext('2d'),
83 imageWidth = 0, //压缩图片大小
84 imageHeight = 0,
85 offsetX = 0,
86 offsetY = 0,
87 data = '';
88 canvas.width = squareW;
89 canvas.height = squareH;
90 context.clearRect(0,0,squareW,squareH);
91 console.log('判断宽度');
92 if(this.width > squareW){
93 imageWidth = Math.round(squareW);
94 imageHeight = squareH;
95 offsetX = Math.round((imageWidth-squareW)/2);
96 }else{
97 imageHeight = Math.round(squareH);
98 imageWidth = squareW;
99 offsetY = Math.round((imageHeight - squareH)/2)
100 }
101 console.log('准备压缩');
102 context.drawImage(this,offsetX,offsetY,imageWidth,imageHeight);
103 var data = canvas.toDataURL('image/jpeg')
104 callback(data)
105 });
106 image.attr('src',e.target.result)
107 };
108 console.log('执行reader.readAsDataURL');
109 console.log(Object.prototype.toString.call(fileObj));
110 console.dir(fileObj);
111 reader.readAsDataURL(fileObj);
112 }catch (e) {
113 console.log('压缩失败!' + e);
114 //调用不压缩方法
115 directTurnIntoBase64(fileObj,callback)
116 }
117 }
118 }
Original: https://www.cnblogs.com/yangdadaBO/p/16149163.html
Author: 洋大大
Title: html图片上传并预览笔记
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/570967/
转载文章受原作者版权保护。转载请注明原作者出处！