前端使用image-compressor.js压缩图片并转为base64

前端图片压缩解决办法 本篇文章提供前端图片压缩的方法 阅读详情

方法

import ImageCompressor from 'image-compressor.js'
// 图片压缩
const compressFile = (file) => new Promise((resolve, reject) => {
  // eslint-disable-next-line no-new
  new ImageCompressor(file, {
    quality: 0.6, // 设置压缩质量为0.6,以尽量保持图片质量
    success: (result) => {
      // 调用 convertToBase64 函数并处理返回的 Base64 字符串
      convertToBase64(result).then(base64Data => {
        const baseStr = base64Data.split(',')[1]
        resolve({ baseStr, fileName: file.name })
      }).catch(error => {
        reject(error)
      })
    },
    error: (e) => {
      reject(e)
    }
  })
})
const convertToBase64 = (blob) => new Promise((resolve, reject) => {
  const reader = new FileReader()
  reader.readAsDataURL(blob)
  reader.onloadend = () => resolve(reader.result)
  reader.onerror = error => reject(error)
})

export default compressFile

 引入调用



import compressFile from './utils.js'
 
const afterRead = async (file: any) =>{
    const file = await compressFile(file.file)
}

使用Layui上传图片,并进行压缩 在工作中使用到layui,发现其上传功能并不是很适用于自己的项目。故此,借用其上传功能,自己将图片压缩并上传. Layui上传图片官方文档:https://www.layui.com/doc/modules/upload.html HTML: <button type="button" class="layui-btn" id="test1"> <i class=... 阅读详情

相关推荐

image-compressor-js:一个使用Compressor.js压缩多个固定图像的程序

图像压缩器js 概述 该程序使用称为Compressor.js的库通过降低Jpeg图像的质量来压缩Jpeg图像。 如何使用 设定品质 输入最大高度和宽度(如果需要) 检查其他必需的选项 拖放图像或选择文件 处理后,单击“下载图像文件”按钮以下载处理后的图像。 使用的库等 使用的库如下。 Compressor.js jQuery的 vue.js 引导程序 JSZip,fileSaver.js 公共场所 在以下站点上可用。

使用ImageCompressor.js进行图片格式抓换,使用compressorjs压缩图片,优化功能,压缩所有格式的图片

在实际开发中常见的图片格式还有png以及ios中的heic图片格式,需要压缩所有格式的图片,因此可以先将图片格式转换成jpeg后再使用compressorjs压缩图片。

ZMJ_QQ的博客 6834

imagecompressor一个简单的JavaScript图像压缩器

一个简单的JavaScript图像压缩器。 使用浏览器的本机canvas.toBlob API进行压缩工作。 一般使用它来预先压缩客户端图像文件,然后再上传它。

js-image-compressor 图片压缩插件

1.安装插件 npm i js-image-compressor 2.引入 import ImageCompressor from 'js-image-compressor' 3.使用 compressionImage (file) { return new Promise((resolve, reject) => { // eslint-disable-next-line no-new new ImageCompressor({

blue beard的博客 3691

image-compressor:用于调整图像大小和压缩图像的前端javascript模块

图像压缩器 用于调整图像大小和压缩图像的前端javascript模块。 不需要后端库。 2.0版发布了! 现在可以import { ImageCompressor } from 'image-compressor';作为简单的import { ImageCompressor } from 'image-compressor'; =============================重要=================== ============ 如果要在window对象下的ES5 JS项目中使用它,则应通过window.ImageCompressor.ImageCompressor对其进行访问。 现在ImageCompressor是模块,因此出现了奇怪的访问顺序。 但是在第一次import模块后的ES6 JS项目中, ImageCompressor将在window.Image

image-compressor:一个简单的NodeJS Web应用程序,可让您一次上传和压缩一个或多个图像

图像压缩器 一个简单的NodeJS网络应用程序,可让您通过自动调整大小和压缩来上传多个图像。 该应用是使用express-generator生成的: npx express-generator --pug --git 。 技术亮点 使用Pug View引擎表达框架 bootstrap 4样式 内存会话的快速会话中间件 multer管理文件上传 纯Java图像处理的jimp

前端JS图片压缩技术的几个插件收集(收藏)

背景 最近用到前端压缩图片的技术,虽说可以参考原理自己写,但是前辈花了很大精力写出来的插件可以帮助我们避免很多坑,直接拿来用吧。 插件1 compression.js 优点:使用简单,参数只有输入图片,压缩比例,输出图片。很少的代码量即可实现压缩和预览的效果。 <title>前端图片压缩</title> <meta charset="utf-8"> <sc...

kouryoushine的博客 1万+

麒麟OS恢复出厂设置原理与实操:非重装的系统状态回滚

Linux操作系统中的‘恢复出厂设置’并非简单重装或镜像还原,而是一种基于状态快照、包管理与配置模板的可控回滚机制。其核心原理依赖LVM快照技术、RPM包签名验证和预置配置模板,兼顾系统稳定性与用户数据安全。该方案在政务、教育等国产化场景中具有显著技术价值——不格式化硬盘、不丢失/home文档、不重配驱动与授权,大幅降低运维复杂度。典型应用场景包括系统卡顿修复、软件冲突清理、桌面环境异常恢复等。本文深入解析银河麒麟V10的kylin-restore-cli工具链与麒麟管家集成逻辑,聚焦‘恢复出厂设置’这一高

weixin_30879169的博客 774

掌握JS压缩图片,这一篇就够了

本文将试图解决如下问题:弄清 Image 对象、data URL、Canvas 和 File(Blob)之间的转化关系;图片压缩关键技巧;超大图片压缩黑屏问题。

华为云官方博客 7690

Doris + Iceberg 实现高效数据湖分层:架构解析与最佳实践

本文深入解析了如何利用Doris与Iceberg构建高效的数据湖冷热分层架构。通过将高频访问的热数据存储在Doris中以实现毫秒级查询,同时将历史冷数据归档至低成本的Iceberg存储,该方案在保障查询性能的同时显著降低了总体拥有成本。文章详细阐述了从架构设计、自动化迁移到统一查询的最佳实践,为应对海量数据下的成本与性能平衡提供了实战指南。

weixin_29207533的博客 135

利用Ghidra与SVD插件实现STM32固件深度逆向分析

本文详细介绍了如何利用Ghidra逆向工程框架结合SVD插件,实现对STM32固件(.bin文件)的深度逆向分析。通过加载描述芯片外设寄存器的SVD文件,Ghidra能将晦涩的硬件地址操作转换为可读的寄存器符号,极大提升了对嵌入式固件中通信协议、安全校验等关键逻辑的分析效率。文章涵盖了从Java环境搭建、工具配置到实战逆向解析的完整流程。

peach的博客 945

vue 图片压缩 转 base64 上传图片

因业务需求,公司项目需要用到 图片上传,压缩,转 base64,而这些都是在前台实现的。我只前也没在 vue 里写过这种逻辑和代码,在我的耐心钻研下,终于交付了代码和功能。 现在想把代码发不出来,分享给大家!!! 前端页面 一丶template <template> <div class="identityID"> <x-header :left-op...

CrazyNing 5537

Replay音频转换时samplerate缺失的解决方案指南

Replay音频转换时提示"No module named 'samplerate' This error is lazily reported, having originally occured in File"的解决方案

weixin_47445543的博客 2134

前端实现 JPG 图片压缩的完整指南

本文介绍了三种图片压缩方案:功能丰富的Compressor.js、支持多线程的browser-image-compression和原生Canvas API。详细分析了各方案优缺点:Compressor.js配置灵活但需引入库;browser-image-compression性能好但有网络依赖;Canvas API无依赖但功能有限。提供了关键代码实现,包括JPG类型判断、各方案使用方法和Canvas核心压缩逻辑。建议生产环境用前两种方案,简单需求用Canvas API,并注意兼容性和性能问题。文末附有在线D

油墨香^-^的博客 1064

创龙 瑞芯微 RK3588 国产2.4GHz八核 工业开发板—ISP图像处理开发案例

创龙科技研发的 TL3588-EVM 评估板具备强大视频处理能力,可满足多场景视频开发需求。为助力开发者快速上手,本文整理 7 个实用视频开发案例,涵盖从采集到显示的全流程,详细说明各案例的硬件连接、参数配置与代码解析,帮助开发者高效实现评估板视频相关功能开发与调试。

创龙,嵌入式一体化解决方案商 209

CVPR 2026 即插即用 | 注意力篇 | MSEF:超轻注意力,空间-通道双分支并行融合,既增强特征又抑制噪声!

Multinex提出了一种超轻量级微光图像增强框架,其核心创新是MSEF模块。MSEF采用双分支并行架构,结合空间局部特征(深度可分离卷积)和全局通道注意力(改进SE),通过Tanh激活实现特征增强与抑制。相比传统注意力模块,MSEF在几乎不增加计算量的情况下显著提升性能,特别适合轻量级网络和边缘设备部署。实验表明,该模块能有效提升PSNR约3dB,同时保持极低的参数量(0.7K-45K)。

主要更新底层视觉(去噪、超分等)相关的科研内容,形式为【论文精读】+【论文复现】 605

探索J I C源代码:如何用纯JavaScript实现无依赖图片压缩库

你是否曾经为网站图片上传速度慢而烦恼?是否希望找到一种简单高效的图片压缩方案?今天,我们将深入探索**J I C**这个纯JavaScript图片压缩库的源代码,揭秘它如何在客户端实现零依赖的图片压缩功能。这个开源项目使用HTML5 Canvas和File API技术,让开发者能够在图片上传前就完成压缩处理,大幅提升用户体验和服务器带宽效率。 ## 🔍 项目概述:轻量级JavaScript图片

gitblog_01079的博客 798

【推荐100个unity插件】皮毛shader着色器 实现可以用动的毛茸茸毛绒绒效果

Unity内置渲染管线毛发着色器实现 摘要:本文介绍了Unity内置渲染管线下的毛发着色器实现方案。该方案通过多层渲染技术模拟毛发效果,支持基础光照模型(环境光、漫反射和镜面反射),提供毛发长度调节功能。主要包含10个渲染通道,采用逐步增加的FURSTEP参数(0.05-0.55)分层渲染毛发,每层使用相同的着色器代码但不同参数值。该实现仅适用于内置渲染管线,不支持毛发动态效果,代码结构简洁,通过FurHelper.cginc包含核心着色逻辑。

向宇的博客,专注php/web全栈 unity游戏开发,欢迎大家评论纠错 2677

前端实现图片压缩

前端实现图片压缩

weixin_38881784的博客 8868

harbor x509: certificate signed by unknown authority【20251222】

本教程通过「合并证书链(服务器端)+ 预置根 CA(客户端)」彻底解决了自签名证书的 x509 错误,同时集成了 Trivy 漏洞扫描,实现了 Harbor 从搭建到实用的全流程。证书链合并是服务器端的关键,确保客户端获取完整信任路径;客户端需同时配置「系统信任库 + Docker 信任目录」,避免 Docker 独立信任机制导致的问题;所有 IP 需保持一致(Harbor 配置、证书绑定、客户端访问),是避免错误的基础。

老韩的Linux云计算架构师进阶之路 682

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

image图片解除占用 wpf_压缩图片我看这篇最全

作者:wuwhshttps://segmentfault.com/a/1190000023486410前言公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验。插播一下,本文案例已整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 g...

weixin_39752828的博客 346

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

vue3+ts 中实现压缩图片、blob 转 base64

vue3+ts 中实现压缩图片、blob 转 base64

微光无限的博客 1578

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

【Web技术】696- 详解 JS 压缩图片

作者:wuwhshttps://segmentfault.com/a/1190000023486410前 言公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可...

pingan8787 567

js前端图片压缩处理

javascript 前端压缩图片 并上传图片

weixin_44542598的博客 566

.net 保存base64 图片_了解 JS 压缩图片,这一篇就够了

作者:wuwhshttps://segmentfault.com/a/1190000023486410已获原作者授权转载前言公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验。插播一下,本文案例已整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可...

weixin_39618730的博客 187

vue压缩图片后显示不出来_vue中实现图片压缩 file文件的方法

项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下。(我已经拿到上传的file文件的前提下)先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法将图片压缩的方法写到这个公用的js(api.js)中//base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件)function dataurltofile(dataurl) {v...

weixin_35676504的博客 642
上一篇: git 常用命令
Zen-x-Mindy
博客等级 码龄10年 6粉丝 9原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值