在做一个项目，其中的一个需求是需要用户将图片上传至服务器，开发的时候只有我自己测试，一切都还挺顺利的，项目上线之后，我将它部署在腾讯云的2核、2G、5MB带宽的服务器上，用户使用量增加之后，发现，在用户使用高峰期上传图片的时候，会出现卡顿。
查看服务器使用状态，发现只有带宽占用的特别高。
手机拍照片的文件大概在5MB左右，比较大，多用同时上传的时候，带宽会占满，服务器压力比较大。
那我们是否可以使用javascript把将要上传的图片进行压缩，使图片变小，再进行上传呢？
网站是手机端网站，使用的是vant4组件。Vant的上传图片组件是将图片以base64的形式传递至后台。
那，我这里就需要考虑如何压缩base64格式的图片。
我这里使用的是vue3.2（TS） + vant4
下边就是我定义的压缩base64格式图片的方法，传递的参数在方法的注释中有写。
/** * @name: 压缩base64图片 * @author: camellia * @email: guanchao_gc@qq.com * @date: 2023-03-02 * @param: base64String string base64字符串 * @param: w number 图片长边长度 * @param: quality number 压缩比 */ export function compress(base64String: string, w: number, quality: number) { // var getMimeType = function(urlData) { // var arr = urlData.split(","); // var mime = arr[0].match(/:(.*?);/)[1]; // // return mime.replace("image/", ""); // return mime; // }; var newImage = new Image(); var imgWidth, imgHeight; var promise = new Promise(resolve => (newImage.onload = resolve)); newImage.src = base64String; return promise.then(() => { imgWidth = newImage.width; imgHeight = newImage.height; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); if (Math.max(imgWidth, imgHeight) > w) { if (imgWidth > imgHeight) { canvas.width = w; canvas.height = (w * imgHeight) / imgWidth; } else { canvas.height = w; canvas.width = (w * imgWidth) / imgHeight; } } else { canvas.width = imgWidth; canvas.height = imgHeight; } ctx?.clearRect(0, 0, canvas.width, canvas.height); ctx?.drawImage(newImage, 0, 0, canvas.width, canvas.height); // var base64 = canvas.toDataURL(getMimeType(base64String), quality); var base64 = canvas.toDataURL("image/jpeg", quality); // console.log(base64); return base64; }); },
调用方法：
compress(file.content, 2000, 0.8).then(val => { //得到压缩图片 console.log(val); });
其实，到这里，压缩图片的功能就已经写完了。包括如何调用我自定义的压缩方法。
但是，我转念一想，要是上传的图片不是base64格式，该怎么处理呢？
上边的方法其实也可以使用，就是javascript将图片文件转换成base64编码，再进行压缩，再将压缩之后的base64编码传递至后台进行图片上传。但是这样就相对来说麻烦一点，但是相对于我之前在服务器进行压缩的方式来说，将压力给到了客户端。也不是不行。可能就不是最优解叭
我这里没有用到，下次用到了再来补充图片变base64编码的方法。
有好的建议，请在下方输入你的评论。
