本文介绍如何在JavaScript中利用Canvas API将图片压缩至指定的KB大小。通过FileReader获取Base64，创建Image对象并在Canvas中重绘，利用toDataURL调整质量参数。代码封装为工具函数，支持Vue等框架直接调用，解决上传限制问题。
在前端开发场景中，上传大尺寸图片常受限于服务器或带宽要求。为满足特定大小限制，需要对图片进行压缩处理。以下提供一套完整的解决方案，代码可直接复制使用。
图片压缩的核心逻辑涉及文件读取、格式转换及质量调整。
- 首先，通过原生HTML input标签获取用户选择的图片文件对象。
- 接着，利用FileReader将文件对象转换为Base64编码字符串，便于后续处理。
- 基于转换得到的Base64数据，创建一个HTMLImageElement对象以加载图片资源。
- 将加载好的图片绘制到Canvas画布上，利用Canvas的绘图能力进行尺寸或质量调整。
- 通过反复调整Canvas输出的图片质量指数（quality），逐步降低文件大小，直至达到预设的目标大小。
为了便于复用，将上述逻辑封装为独立的JavaScript模块。
将封装好的代码保存为compressImg.js，并放置在项目的utils目录下，以便全局调用。
/**
* 压缩图片到指定大小
* @param baseImg base64图片
* @param maxSize 单位kb
*/
export function compressImgBySize (baseImg, maxSize = 200) {
return new Promise((resolve) => {
// 计算图片大小
const strLength = baseImg.length
const fileLength = parseInt(strLength - (strLength / 8) * 2)
let size = parseInt((fileLength / 1024).toFixed(2))
// 判断图片是否符合指定大小要求
if (size <= maxSize) {
resolve(baseImg)
return
}
// 创建image对象
const img = new Image()
if (baseImg.indexOf('data:image/') !== -1) {
img.src = baseImg
} else {
img.src = 'data:image/jpeg;base64,' + baseImg
}
img.onload = () => {
// 把image对象 转换为 canvas对象
const canvas = imgToCanvas(img)
let resUrl = ''
// 图片质量，范围：0 ~ 1
let quality = 0.9
// 当图片大小大于指定maxSize，图片质量大于0时继续通过降低图片资料来压缩
while (size > maxSize && quality > 0) {
// 在canvas上绘制该HTMLImageElement，得到图片base64
resUrl = canvas.toDataURL('image/jpeg', quality).replace(/^data:image\/\w+;base64,/, '')
const resLength = resUrl.length
// 计算绘制出的base64图片大小
const resFileLength = parseInt(resLength - (resLength / 8) * 2)
size = parseInt((resFileLength / 1024).toFixed(2))
// 降低图片质量
quality = (quality - 0.1).toFixed(1)
}
resolve(resUrl)
}
img.onerror = () => {
resolve(baseImg)
}
})
}
// 把image 转换为 canvas对象
export function imgToCanvas (image) {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
canvas.getContext('2d').drawImage(image, 0, 0)
return canvas
}
在需要使用图片压缩功能的Vue组件中，引入该工具模块并调用相应方法。具体调用方式如下所示：
// 注意引入路径是否正确
import { compressImgBySize } from '@/utils/compressImg'
// this.applyFile[0].content 为指定的base64格式照片
// 1200 指将图片压缩到1200kb大小以下
compressImgBySize('file文件对象', 1200).then(baseImg => {
// 输出图片base64
console.log(baseImg)
})此外，这里补充图片转换为Base64的基础实现方法。
toBase64(file){//转base64
let base64=''
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
// 转换完成，获取Base64编码
this.imgBase64 = e.target.result;
if(this.imgBase64){
this.suofang(this.imgBase64,this.getImgList)
}
// 这里可以根据需要对base64进行处理，比如存储到Vuex、Data等
return base64
}
},综上所述，利用Canvas和Base64技术可以有效解决前端图片压缩至指定大小的需求。更多关于JS图片压缩的技术细节，欢迎查阅本站往期文章或继续浏览相关教程，感谢支持。
至此，关于利用JS将base64格式图片压缩至指定大小的教程已阐述完毕，如需了解更多涉及JS压缩base64图片至特定大小的相关信息，敬请查阅本站历史文章或继续浏览后续内容，衷心期望大家今后能持续支持本站！