canvas实现前端压缩图片

压缩图片

  • 最常见的是减小图片的宽高尺寸来实现压缩
  • 但也会有更高级的需求,不修改尺寸进行图片大小的压缩
    注意: canvas的toDataURL函数的第二个参数可以修改图片的输出质量,但只有jpeg和webp格式才有效
    需要对其他格式,比如png透明图片不修改尺寸压缩,前端就很难办到了

更高级的压缩~传说中的WASM

  • 使用WASM技术,把后端C语言的图片压缩库运行到浏览器端,实现png透明图片不修改尺寸的压缩
  • 谷歌chrome实验室最近开源的项目: GoogleChromeLabs/squoosh

canvas在图形处理的其他妙用

判断图片是否透明

图片特效处理

比如,反相,高亮,增加对比度,锐化,灰度处理等等

项目源码已上传

演示地址: 演示地址
GitHub: GitHub链接
欢迎小伙伴们star 💗❤️💖~~

同时欢迎关注我的个人微信公众号:

分享到:
Disqus 加载中...

如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理