能否使用JavaScript获取图片宽高并调整尺寸，优化TinyMCE上传图片的体积？

需求背景 #

• 现有上传链路：已开发完成服务端接收接口，适配TinyMCE的文件上传、拖拽上传场景，当前逻辑是将接收到的二进制格式图片直接写入服务器存储。
• 现存痛点：用iPhone拍摄的测试原图分辨率为3024 × 4032，即使可以在编辑器内调整图片的显示尺寸，服务端仍会完整保存原大小的4.9MB图片文件，既占用存储资源，也会拉高后续页面的图片加载体积。
• 待处理文件特征：所有上传图片均为二进制流格式，覆盖JPEG、PNG、GIF三种常见格式。
• 效果预期：参考本地手动调整的效果——在Mac上用Preview工具将图片压缩到500像素宽度后，文件体积仅191KB，远小于原文件，因此希望找到可在上传、保存环节落地的尺寸调整方案，优先希望能基于JavaScript实现。

落地方案 #

前端上传前压缩（零服务端开销，优先推荐） #

完全可以通过浏览器原生JavaScript实现需求，不需要额外搭服务端压缩逻辑，效果和本地用Preview手动调整的基本一致：

• 核心实现路径：
  1. 挂载TinyMCE的images_upload_handler钩子，拦截待上传的文件对象，拿到原始二进制图片流
  2. 用FileReaderAPI读取图片流为可解析的资源，加载到Image对象中获取原始尺寸
  3. 按预设规则等比计算缩放尺寸（例如限制最大宽度不超过1000px，避免竖版高图过度拉长），创建对应尺寸的canvas画布将图片重绘
  4. 调用canvas的toBlob方法输出压缩后的二进制流，直接将该流提交给服务端，替换掉原始的大文件
• 特殊格式适配：
  • 常规JPEG/PNG格式可以直接通过canvas处理，压缩质量可设置为0.8-0.9的区间，兼顾清晰度和文件体积
  • GIF格式因为原生canvas只会捕获第一帧，若需要保留动图效果，可以引入轻量的gifuct-js做帧解析和重绘，同样可以实现等比缩放
• 该方案的优势是压缩环节完全在用户端浏览器完成，不占用服务端算力，也能从源头减少大文件上传的带宽消耗。

服务端兜底压缩（全链路尺寸管控） #

如果需要对所有上传文件做强制尺寸管控，也可以用JavaScript技术栈在服务端实现处理，不需要引入其他语言的依赖：

• 适配库选择：可以使用sharp作为图片处理依赖，该库性能优异，原生支持JPEG、PNG、GIF等格式的尺寸调整、质量压缩，处理4000px以内的大图单张耗时仅几十毫秒
• 集成逻辑：在服务端接收到上传的二进制流后，先判断图片原始尺寸是否超过预设阈值，超过的部分自动按规则重缩放、压缩，再写入服务器存储，不需要改动原有上传流程的核心逻辑。

内容的提问来源于stack exchange，提问作者Doug Lerner