想要提供一流的用户体验，同时又不牺牲图片的质量？传统的图片上传过程中，用户常常因为图片大小限制而感到沮丧，不得不手动调整图片尺寸，这无疑增加了用户的操作负担，尤其是对不太懂如何调整图片尺寸的用户来说，用户体验非常不好。
话不多说，压缩方法封装如下：
/*** 图片压缩* @param {string} url - 图片地址** @param {object} optoion - 配置项*/function compressImg(url, optoion={maxWidth:1000, //最大宽度 pxmaxHeight: 1000,//最大高度 pxquality: 0.8 //压缩质量 0-1}) {return new Promise(function (resolve, reject) {try {let img = new Image();img.src = URL.createObjectURL(image);// 缩放图片需要的canvaslet canvas = document.createElement(\\\'canvas\\\');let context = canvas.getContext(\\\'2d\\\');// base64地址图片加载完毕后img.onload = function () {// 图片原始尺寸let originWidth = this.width;let originHeight = this.height;// 最大尺寸限制let maxWidth = optoion.maxWidth,maxHeight = optoion.maxHeight;// 目标尺寸let targetWidth = originWidth,targetHeight = originHeight;// 图片尺寸超过500x1000的限制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);// canvas转为blobcanvas.toBlob(function (blob) {let files = new File([blob], image.name, { type: image.type || \\\'image/png\\\' });resolve(files);}, image.type || \\\'image/png\\\', option.quality);}} catch (e) {return reject({code: 1,msg: \\\'图片压缩出错了!\\\'});}});}
使用方式如下：
//上传图片最大宽度500px, 最大高度500px，压缩质量0.8const newImg = await obj.compressImg(imgUrl, {maxWidth: 500,maxHeight: 500,quality: 0.8});
让我们一起迈向更加智能、便捷的图片上传，让用户享受无缝、愉悦的上传体验。?? 现在就开始优化你的图片上传流程吧！
原创文章，作者：网络技术联盟站，如若转载，请注明出处：https://www.sudun.com/ask/49857.html
