如何用JS将base64图片压缩至指定大小
更新时间:2025年04月01日 08:35:05 作者:喜欢代码的新之助
在开发中通常在上传图片时,由于各种限制,需要将上传的图片压缩到某一大小范围内才能上传,这篇文章主要介绍了如何用JS将base64图片压缩至指定大小的相关资料,需要的朋友可以参考下
在开发中,通常在上传图片时,由于各种限制,需要将上传的图片压缩到某一大小范围内才能上传。在此提供以下方法实现该需求,复制可用。
压缩图片原理
- 通过原生的input标签拿到要上传的图片文件
- 将图片文件file对象转化成图片base64
- 根据图片base64创建img图片对象
- 在canvas上绘制该HTMLImageElement
- 通过不断降低图片质量指数来达到压缩图片大小的目的
封装
将以上代码封装为一个js文件,这里命名为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)
})附:js图片转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
}
},总结
到此这篇关于如何用JS将base64图片压缩至指定大小的文章就介绍到这了,更多相关JS将base64图片压缩指定大小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Express框架Router Route Layer对象使用示例详解
这篇文章主要为大家介绍了Express框架Router Route Layer对象使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-03-03
前端技术选型之该选择JavaScript还是TypeScript详析
TypeScript(TS)和JavaScript(JS)是目前项目开发中比较流行的两种脚本编程语言,其中TypeScript是JavaScript的超集,最终通过工具编译生成JavaScript,这篇文章主要介绍了前端技术选型之该选择JavaScript还是TypeScript的相关资料,需要的朋友可以参考下2025-07-07
javascript设计模式 – 解释器模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 解释器模式,结合实例形式分析了javascript解释器模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
JavaScript修改、删除数组中某个对象的某个属性几种方法
在JavaScript开发中,经常需要修改数组中对象的属性,下面这篇文章主要介绍了JavaScript修改、删除数组中某个对象的某个属性几种方法,需要的朋友可以参考下2024-09-09


最新评论