用 Canvas 原理看懂在线图片压缩（科普向）

你可能会好奇：没有服务器，网页怎么压缩图片？秘密在浏览器的 Canvas——它能在本地把图片「重画」一遍，再按新参数重新编码。

一、图片进 Canvas

工具用 createImageBitmap 或 Image 把图片解码到一块内存画布（Canvas）。此时图片已变成像素矩阵，可以缩放、旋转、翻转、加水印、裁剪。

二、重画 + 编码

设定好宽高与质量后，调用 canvas.toBlob(type, quality) 让浏览器按指定格式和质量重新编码。JPG / WebP 是有损编码，质量越低每个像素越「省」；PNG 走无损，靠调色板索引减少颜色数瘦身。

三、为什么本地也安全

整个过程像素只存在于你浏览器的内存里，没有任何网络请求把图发出去——这正是「本地处理、不上传服务器」的技术基础。压缩完的 Blob 直接触发下载或打包 ZIP，同样不经过网络。

更多原理与格式取舍，请看 图片压缩格式科普；完整功能说明见 使用教程总览。