https://www.cnblogs.com/goloving/p/8260206.html
https://segmentfault.com/a/1190000011463459
根据第一个链接的内容，写的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <script> (function(){function a(h,g,b,e,c){var f=h.documentElement,d="orientationchange" in window?"orientationchange":"resize";var i=function(){var j=f.clientWidth;if(j>=e&&j<=b){f.style.fontSize=c*(j/b)+"px"}else{if(j>=b){f.style.fontSize=c+"px"}else{if(j<=e){f.style.fontSize=c*(e/b)+"px"}}}};g.addEventListener(d,i,false);h.addEventListener("DOMContentLoaded",i,false)}a(document,window,640,320,34.13)})(); </script> </head> <body> <img id="ceshi1" style="max-500px;max-height:500px;"> <input id="file_id" type="file"> <script src="./js/jquery.min.js"></script> <script> $(function(){ var eleFile = document.querySelector('#file_id'); // 压缩图片需要的一些元素和对象 var reader = new FileReader(), img = new Image(); var file = null; var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); eleFile.addEventListener('change', function (event) { file = event.target.files[0]; // 选择的文件是图片 if (file.type.indexOf("image") == 0) { reader.readAsDataURL(file); } }); // base64地址图片加载完毕后 img.onload = function () { var originWidth = this.width; var originHeight = this.height; var maxWidth = 1920, maxHeight = 1080; var targetWidth = originWidth, targetHeight = originHeight; if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { targetWidth = maxWidth; targetHeight = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); } } // canvas对图片进行缩放 canvas.width = targetWidth; canvas.height = targetHeight; // 清除画布 context.clearRect(0, 0, targetWidth, targetHeight); // 图片压缩 context.drawImage(img, 0, 0, targetWidth, targetHeight); var type = 'image/jpeg'; //将canvas元素中的图像转变为DataURL var dataurl = canvas.toDataURL(type); $("#ceshi1").attr("src",dataurl); }; // 文件base64化，以便获知图片原始尺寸 reader.onload = function(e) { img.src = e.target.result; }; }) </script> </body> </html>