Canvas API
用于在 HTML5 canvas 元素上进行像素级绘图和图像处理的 JavaScript API,直接在浏览器中运行。
Canvas API 随 HTML5 引入,提供了在 <canvas> 元素上进行像素级图形操作的 JavaScript 接口。通过 getContext('2d') 获取 2D 上下文后,开发者可以绘制路径、渲染文本、合成图像和操作单个像素。
图像处理的标准工作流程是:使用 drawImage() 绘制图像,通过 getImageData() 提取像素数据(RGBA 数组),然后应用变换。这使得客户端裁剪、缩放、滤镜和色彩校正无需服务器往返即可完成。
许多基于浏览器的工具如图像压缩器和缩放工具内部都依赖 Canvas API。结果通过 toBlob() 或 toDataURL() 以 JPEG、PNG 或 WebP 格式导出。对于大图像,OffscreenCanvas 配合 Web Workers 可防止主线程阻塞。