JavaScript 使用canvas压缩图片
var compression = function(){ var eleFile = document.createElement("input"); eleFile.type = 'file'; // 压缩图片需要的一些元素和对象 var reader = new FileReader(), //创建一个img对象 img = new Image(); // 选择的文件对象 var file = null; // 缩放图片需要的canvas var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var completeOver = null; // base64地址图片加载完毕后 img.onload = function() { // 图片原始尺寸 var originWidth = this.width; var originHeight = this.height; // 最大尺寸限制,可通过国设置宽高来实现图片压缩程度 var maxWidth = 300, maxHeight = 300; // 目标尺寸 var targetWidth = originWidth, targetHeight = originHeight; // 图片尺寸超过400x400的限制 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); /*第一个参数是创建的img对象;第二个参数是左上角坐标,后面两个是画布区域宽高*/ //压缩后的图片base64 url /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg'; * qualityArgument表示导出的图片质量,只要导出为jpg和webp格式的时候此参数才有效果,默认值是0.92*/ var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式 //console.log(canvas.toDataURL('image/jpeg', 0.92)); // document.body.style.backgroundImage='url(' + newUrl + ')'; // ps.src = newUrl; completeOver && completeOver(newUrl); completeOver = null; }; // 文件base64化,以便获知图片原始尺寸 reader.onload = function(e) { img.src = e.target.result; }; eleFile.addEventListener('change', function(event) { file = event.target.files[0]; // 选择的文件是图片 if(file.type.indexOf("image") == 0) { reader.readAsDataURL(file); } }); // 选择压缩图片 this.toSelect = function(fn){ completeOver = fn; eleFile.value = ""; eleFile.click(); }; // 通过路径压缩图片 this.toSrc = function(paths,fn){ completeOver = fn; img.src = paths; }; // 通过files压缩图片 this.toFiles = function(files,fn){ completeOver = fn; reader.readAsDataURL(files); }; } var a = new compression(); a.toSelect((base64)=>{ //压缩完成后返回的base64数据 })