将图片压缩至指定大小Kb(Thumbnailator)

本文介绍了如何在SpringBoot-Plus框架下,利用Thumbnailator这个优秀的Java图片处理库,将上传的图片压缩到指定的300kb。在实际操作中,由于图片上传后会被加上UUID,导致了压缩过程中的异常,但通过调整方法成功解决了问题。
摘要由CSDN通过智能技术生成

放代码前,先唠叨唠叨,舒缓一下我的郁闷之情。

今天下午改一个后台管理系统的需求,要求上传的图片要压缩到300kb,感觉不难,就开搞。

先撩拨一下度娘,搞点货出来瞅瞅,不复杂就干脆搬砖算了。

嗯,度娘不愧为度娘,货不少,找到一个简单(优秀)的一匹的博文,用的是一个优秀的google开源的图片处理的java类库Thumbnailator(想了解么,有大神总结了[Thumbnailator使用简介],和前面那篇差不多,呵呵)。

不过呢,他们只是介绍了这个优秀的类库的使用,而我需要指定将图片压缩到多大,所以说呢,度娘真美,要啥给啥[使用Thumbnails实现图片指定大小压缩],美滋滋,开始搬砖,搬完还要搞其他的事呢。

燃,冰卵,由于开发框架用的是闲大赋团队开发的SpringBoot-Plus的后台管理系统,他的图片上传后,会在图片名称后加上UUID,这就导致了,使用Thumbnailator中的方法输出文件时,会报net.coobird.thumbnailator.tasks.UnsupportedFormatException: No suitable ImageReader found for source data.-找不到合适的图片阅读器的异常,因为后缀不在是图片的后缀了,而是一串UUID。无奈的我,只能想办法解决咯。

幸运的是,有大佬[java图片压缩(Thumbnails)]在,我站上了巨人的肩膀,哈哈哈

好了,不逼逼了,放上代码,记录一下:

SpringBoot-Plus的图片上传方法,略作修改:
/*附件类操作*/
@PostMapping(MODEL + "/uploadAttachment.json")
@ResponseBody
public JsonResult uploadFile(@RequestParam("file") MultipartFile file,String batchFileUUID,String bizType,String bizId) throws IOException {
   
    if(file.isEmpty()) {
   
        return JsonResult.fail();
    }
    System.out.println(batchFileUUID + "===&#
### 回答1: 可以使用 JavaScript 库或框架来实现图片压缩功能。 例如可以使用 "canvas" 元素和 "FileReader" 对象来实现图片压缩。 以下是一个简单的示例代码: ``` // 选择文件 input 元素的 id const inputId = 'input'; // 压缩后图片的大小(单位为字节) const targetSize = 100000; // 选择文件 const input = document.getElementById(inputId); const file = input.files[0]; // 创建 FileReader 对象 const reader = new FileReader(); // 当文件加载完成时运行的函数 reader.onload = function(event) { // 获取加载的图片 const img = new Image(); img.src = event.target.result; // 当图片加载完成时运行的函数 img.onload = function() { // 获取图片的原始大小 const originalSize = file.size; // 计算图片压缩比例 const ratio = targetSize / originalSize; // 创建 canvas 元素 const canvas = document.createElement('canvas'); // 设置 canvas 的宽度和高度 canvas.width = img.width; canvas.height = img.height; // 将图片绘制到 canvas 上 const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); // 压缩图片 const compressedDataUrl = canvas.toDataURL('image/jpeg', ratio); // 使用压缩后的图片数据 // ... }; }; // 以 DataURL 的形式读取文件 reader.readAsDataURL(file); ``` 这段代码会读取选择的文件,将其加载到内存中,然后将其绘制到 canvas 上,并使用指定的压缩比例进行压缩。 ### 回答2: 使用js将图片压缩指定大小可以通过以下步骤实现: 1. 首先,通过HTML的<input>元素让用户选择需要压缩的图片文件。可以使用<input type="file">来创建一个文件上传按钮,并添加一个id以便后续操作。 2. 使用FileReader对象读取用户选择的图片文件,并将其转换成Data URL的形式,以便后续操作。可以通过以下代码实现: ``` const fileInput = document.getElementById("fileInput"); const reader = new FileReader(); fileInput.addEventListener("change", function(event) { const file = event.target.files[0]; reader.onload = function(e) { const dataUrl = e.target.result; // 后续操作 } reader.readAsDataURL(file); }); ``` 3. 接下来,可以使用HTML5的Canvas元素来进行图片的压缩操作。创建一个Canvas元素,并通过设置其宽度和高度来指定压缩后的尺寸。 4. 使用Canvas的context对象,调用drawImage()方法将读取到的图片绘制到Canvas上。可以通过以下代码实现: ``` const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const image = new Image(); image.src = dataUrl; image.onload = function() { // 计算压缩后的尺寸 const maxWidth = 500; const maxHeight = 500; let width = image.width; let height = image.height; if (width > height) { if (width > maxWidth) { height *= maxWidth / width; width = maxWidth; } } else { if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } } // 设置Canvas尺寸 canvas.width = width; canvas.height = height; // 在Canvas上绘制压缩后的图片 ctx.drawImage(image, 0, 0, width, height); // 获取压缩后的图片数据URL const compressedDataUrl = canvas.toDataURL("image/jpeg", 0.8); // 压缩后的图片处理操作 // ... } ``` 5. 最后,可以将压缩后的图片数据URL用于展示或上传等操作。可以通过设置img元素的src属性来显示压缩后的图片,或通过Ajax等方式将数据URL发送到服务器端。 通过以上步骤,可以使用js将图片压缩指定大小。 ### 回答3: 使用 JavaScript 将图片压缩指定大小可以通过以下步骤实现: 1. 创建一个 <input> 元素,允许用户选择要上传的图片文件。 2. 监听 <input> 元素的 `change` 事件,当用户选择图片后触发。 3. 在 `change` 事件处理程序中,使用 `FileReader` 对象读取用户选择的图片文件。 4. 在 `FileReader` 的 `onload` 事件中,获取读取的图片数据,并创建一个新的 <img> 元素来展示图片。 5. 获取目标图片的原始宽度和高度。 6. 创建一个 <canvas> 元素,设置宽度和高度为指定的压缩大小。 7. 在 <canvas> 上绘制图片,并指定压缩后的宽度和高度。 8. 使用 `canvas.toDataURL()` 方法将压缩后的图片转换为 base64 编码的字符串。 9. 将该字符串赋值给 <img> 元素的 `src` 属性,显示压缩后的图片。 下面是一个简单的示例代码: ```javascript function compressImage(file, maxWidth, maxHeight) { const reader = new FileReader(); reader.onload = function(event) { const img = new Image(); img.src = event.target.result; img.onload = function() { const canvas = document.createElement('canvas'); let width = img.width; let height = img.height; if (width > maxWidth) { height = Math.round(height * maxWidth / width); width = maxWidth; } if (height > maxHeight) { width = Math.round(width * maxHeight / height); height = maxHeight; } canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7); const compressedImage = document.createElement('img'); compressedImage.src = compressedDataUrl; document.body.appendChild(compressedImage); }; }; reader.readAsDataURL(file); } const fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', function(event) { const file = event.target.files[0]; compressImage(file, 800, 600); // 指定压缩大小为 800x600 }); ``` 这个示例代码通过监听文件选择事件,将选择的图片压缩后显示在页面上。使用 `<input>` 元素选择文件,并通过调用 `compressImage` 函数传入目标图片文件、最大宽度和最大高度即可实现将图片压缩指定大小
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值