如何用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图片压缩指定大小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript 全面解析各种浏览器网页中的JS 执行顺序

    JavaScript 全面解析各种浏览器网页中的JS 执行顺序

    近来我通过一些测试以全面的解析网页在各种浏览器中的JavaScript代码的执行顺序,在这儿做个记录。
    2009-02-02
  • javascript中String类的subString()方法和slice()方法

    javascript中String类的subString()方法和slice()方法

    最近在看《Javascript高级程序设计》一书,在书中发现一些以前没有接触过的且比较实用的技巧和知识点,想通过博客记录一下,以加深记忆。
    2011-05-05
  • 5分钟打造简易高效的webpack常用配置

    5分钟打造简易高效的webpack常用配置

    这篇文章主要介绍了5分钟打造简易高效的webpack配置,详细的介绍了打包调试、提取公共代码、压缩、热替换等配置,有兴趣的可以了解一下
    2017-07-07
  • js获取异步函数数据的实现

    js获取异步函数数据的实现

    本文主要介绍了js获取异步函数数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • Java @Schema和@ApiModel等注解的联系浅析

    Java @Schema和@ApiModel等注解的联系浅析

    这篇文章主要给大家介绍了关于Java @Schema和@ApiModel等注解的联系的相关资料,我在看公司之前的文档,发现了@schema注解,不太了解,所以查询了一些资料,把我的见解记录下,需要的朋友可以参考下
    2023-08-08
  • js实现input密码框显示/隐藏功能

    js实现input密码框显示/隐藏功能

    这篇文章主要为大家详细介绍了js实现input密码框显示和隐藏功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • JS实现不规则TAB选项卡效果代码

    JS实现不规则TAB选项卡效果代码

    这篇文章主要介绍了JS实现不规则TAB选项卡效果代码,通过简单的JavaScript响应鼠标事件动态变换元素样式实现不规则选项卡效果,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • document.onreadystatechange事件的用法分析

    document.onreadystatechange事件的用法分析

    这里主要介绍document.onreadystatechange事件的使用方法, 一般多用于实时监控用户的输入
    2009-10-10
  • JavaScript原型链示例分享

    JavaScript原型链示例分享

    这篇文章主要介绍了JavaScript原型链示例,有需要的朋友可以参考一下
    2014-01-01
  • JavaScript数组方法之findIndex()的用法详解

    JavaScript数组方法之findIndex()的用法详解

    findIndex()方法是一个非常实用的数组方法,可以帮助我们快速查找符合某个条件的元素,本文给大家介绍JavaScript数组方法之findIndex()的用法,感谢的朋友跟随小编一起看看吧
    2023-10-10

最新评论