DEV Community · Show DEV9/4 03:5553 分
浏览器Canvas API图片压缩:无需上传服务器
Compress Images in the Browser with Canvas API — No Uploads, No Server
该工具利用浏览器原生Canvas API在本地压缩图片,无需上传服务器,无水印,无需注册。支持PNG、JPG和WEBP格式。原理是将图片绘制到隐藏的canvas元素上,然后通过canvas.toBlob()以较低质量导出。代码示例展示了如何使用React处理文件选择,通过URL.createObjectURL()创建本地blob URL,加载图片后绘制到canvas,最后用toBlob生成压缩后的blob并更新状态。整个过程在浏览器端完成,无服务器往返,保护用户隐私。