在React.js项目中可以使用Sharp图像处理库吗？

• Sharp是基于C++扩展开发的Node.js原生模块，仅可在Node.js运行环境中执行，不支持浏览器环境
• Create React App为前端项目，构建产物最终运行在浏览器沙箱内，无法调用Node.js原生API与相关模块，直接引入Sharp必然抛出加载错误

方案1：前端完成图像处理 #

如果需要在用户上传后直接在客户端完成图片处理，改用纯前端实现的图像处理库即可，这类库基于浏览器Canvas API实现，完全兼容前端运行环境，可选库包括pica、Cropper.js、browser-image-compression等。

方案2：后端部署图像处理逻辑 #

如果必须使用Sharp的能力，将图像处理逻辑迁移到后端服务实现：

1. 前端将用户上传的图片文件发送到后端接口
2. 后端接收文件后用Sharp完成裁剪、扩展等全部处理操作
3. 后端将处理完成的图片资源返回给前端使用

你当前的Sharp处理链缺少最终输出的调用步骤，在Node.js环境下可运行的正确代码如下：

import sharp from 'sharp';

// 仅可在Node.js环境（后端服务、本地Node脚本等）中运行
const buffer = await sharp(req.file.buffer)
          .resize({ width: 250, height: 250 })
          .extend({
            top: 10,
            bottom: 10,
            left: 10,
            right: 10,
            background:  '#d7d8de'
          })
          .png()
          .toBuffer() // 必须调用该方法才能得到最终处理后的二进制缓存

如果你要在当前使用的Node.js 12.18.0环境中安装Sharp，注意新版本Sharp已停止支持Node.js 12，需要指定安装兼容的旧版本，执行命令：
npm install sharp@0.29

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