不能。Canvas 的 ctx.filter 不支持锐化滤镜，需用 getImageData/putImageData 手动实现卷积运算，如使用 [[0,-1,0],[-1,5,-1],[0,-1,0]] 核；跨域图片须设 crossOrigin；大批量处理可选 WebAssembly 但成本高。
Canvas 的 ctx.filter 能不能直接锐化图片？
不能。HTML5 Canvas 的 ctx.filter（如 "blur(2px)" 或 "brightness(1.2)"）只支持有限的 CSS Filter 效果，**不支持锐化（sharpen）滤镜**。浏览器至今没实现 "sharpen()" 这类函数，强行写会静默失效或报错。
用 Canvas + 卷积矩阵手动实现锐化
真正可控的锐化必须自己写像素级处理：获取图像数据 → 应用 3×3 锐化卷积核 → 写回 canvas。核心是 ctx.getImageData() 和 ctx.putImageData()。
常见锐化核示例（中心权重高，周围为负）：
const sharpenKernel = [ [ 0, -1, 0], [-1, 5, -1], [ 0, -1, 0] ];
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 必须在同源图片上操作，跨域图片会触发
SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D' - 处理前调用
img.crossOrigin = "anonymous"，并确保服务端返回Access-Control-Allow-Origin - 卷积需对每个像素的 RGBA 四个通道分别计算，注意边界像素要跳过（或补零），否则越界读取
data数组会得 0 - 结果值需裁剪到 [0, 255]，否则颜色溢出变黑/白块
WebAssembly 方案适合大批量锐化吗？
适合，但没必要为单张图引入 WASM。如果要在前端批量处理几十张高分辨率图（比如相册预览），WASM + Rust（如 imageproc crate）或 C++（OpenCV.js）确实比纯 JS 快 3–5 倍。但开发成本陡增：要编译、加载 .wasm 文件、管理内存、处理 JS/WASM 数据桥接。
更务实的选择：
- 小图（Uint8ClampedArray 直接操作
data，避免反复 Math.max/min - 中大图：加
requestIdleCallback分块处理，防主线程卡死 - 有 Node.js 后端：锐化逻辑后移，前端只传参、轮询结果，更稳更快
Sharp.js 能在浏览器里用吗？
不能直接用。npm 包 sharp 依赖原生 C++ 模块，无法在浏览器环境运行。有人尝试用 WebAssembly 移植（如 sharp-wasm），但它目前只支持基础缩放/格式转换，**尚未实现卷积锐化接口**。别被 README 里的 “sharp for browser” 误导——它连 convolve() 都没导出。
真正能用的轻量替代：
-
piexifjs（只读元数据） -
jpeg-js（纯 JS JPEG 编解码，可配合自定义滤波） - 自己封装一个 20 行的
applySharpenFilter(data, width, height)函数，比折腾兼容性更强
锐化不是开关式操作，强度、半径、阈值都要试；同一套参数在手机屏和 4K 显示器上效果差异极大——别只看 canvas 输出，一定要在目标设备上真机验证。
