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

[edis0n0]

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

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

[cydysm]

canvas 重画

[hiro0729]

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

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

[mikewang]

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

[kop1989smurf]

script 引用你想用的库

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

[edis0n0]

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

[zzx0403]

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

[IvanLi127]

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

[dengshen]

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