不用 webpack，如何纯前端实现压缩图片？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 687 天前的主题，其中的信息可能已经有所发展或是发生改变。

需求是如果用户选择的图片超过 300kb 就不断循环压缩直到小于 300kb ，然后获取图片的 base64 。

客户给的需求，就不用管需求的合理性，能做到就行了

8 条回复 • 2022-12-29 17:44:37 +08:00

cydysm

2022-12-29 00:21:18 +08:00 via iPhone

canvas 重画

hiro0729

2022-12-29 00:30:15 +08:00

https://www.npmjs.com/package/browser-image-compression

不用 npm install 就下载 js 用 script 标签引用

mikewang

2022-12-29 00:41:43 +08:00

压缩图片有两种途径，一种是直接缩小图片尺寸，另一种是改变压缩参数，两种方式都可以通过 canvas 实现。
如果要导出为 JPEG 图片，可以使用 canvas.toDataURL("image/jpeg", 0.75) 这种方式改变压缩参数，意思是使用 75%的压缩。

kop1989smurf

2022-12-29 08:33:41 +08:00 via iPhone

script 引用你想用的库

btw：webpack 和实现功能有什么关系？

edis0n0

2022-12-29 10:38:01 +08:00

@kop1989smurf #4 不用就不能方便地调 npm 上的包了

zzx0403

2022-12-29 16:47:32 +08:00

@edis0n0 搞错了 node npm webpack 他们的关系呀

IvanLi127

2022-12-29 17:34:37 +08:00

用 canvas 重新画，这个不复杂，缩小分辨率然后用 jpg 输出，如果大了用原始文件，调低分辨率和 jpg 质量再来一次，直到文件大小合适。

dengshen

2022-12-29 17:44:37 +08:00 via iPhone

webpack ？？？？？？？？跟 npm node 都无关好吧！
直接 script 引入一个压缩图片的库在 html 文件里调用都行