如何在静态网站中使用Faceapp.js？已安装依赖但无法运行

看起来你在浏览器环境下使用faceapp.js时踩了几个常见的坑，我帮你梳理一下问题并给出修复方案：

核心问题点 #

• 浏览器不支持Node.js的require语法：你已经通过<script>标签直接引入了faceapp.js，此时faceapp已经作为全局对象存在，不需要再用require去导入。
• await不能直接在全局作用域使用：await关键字只能在async函数内部运行，全局作用域下直接用会抛出语法错误。
• 浏览器环境的API适配：要确认faceapp的浏览器版本是否和Node.js版本的API逻辑一致，部分Node.js专属的文件操作逻辑在浏览器里无法直接复用。

修复后的代码 #

HTML部分（保持原引入结构即可） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/faceapp/bin/faceapp.js"></script>
    <script src="assets/js/script.js"></script>
</head>
<body>
    <h1 class="text-center">Faceapp</h1>
</body>
</html>

JavaScript部分（修正require和await的问题） #

// 直接使用全局的faceapp对象，无需require
// 将逻辑包裹在async函数中，才能使用await
async function processFaceImage() {
    try {
        let processedImage = await faceapp.process('assets/images/ajith.jpg', 'smile_2');
        // 这里可以添加处理完成后的逻辑，比如把图片插入到页面
        console.log('图片处理完成:', processedImage);
    } catch (error) {
        // 捕获可能出现的错误，比如图片路径错误、API调用失败等
        console.error('处理图片时出错:', error);
    }
}

// 调用这个async函数触发处理流程
processFaceImage();

额外注意事项 #

• 确保assets/images/ajith.jpg的路径正确，浏览器能正常访问到该图片资源。
• 如果faceapp需要配置API密钥或其他参数，记得在调用process方法前完成配置。
• 跨域问题：如果faceapp依赖外部API处理图片，浏览器可能会触发跨域限制，开发环境可以临时开启浏览器跨域调试模式，生产环境建议通过后端代理请求。

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