多脚本语言接入（WASM）_开发者指南

本示例展示如何将C、C++、Rust、Go 等语言编写的代码编译成WebAssembly (WASM) 格式，并在 Edge Cloud Apps 函数中运行，以实现图片大小调整的功能。用户可以通过网页界面上传图片并设置目标宽度，函数会调用WASM库对图片进行处理，并将调整后的图片返回给用户。

详细代码

// 使用 32MB 内存实例化 WebAssembly 模块
const wasm = require('./resizer.wasm', {memory: new WebAssembly.Memory({initial: 1024})});
const resizer = wasm.exports; // 获取 WASM 模块的导出函数

async function handleRequest(request) {
    let {pathname} = new URL(request.url.toLowerCase());
    if (pathname.endsWith('/'))  pathname = pathname.substring(0, pathname.length - 1);

    if (pathname === '/wasm-resizer.html') {
        // 返回 HTML 页面
        return new Response(HOMEPAGE, {headers: {"Content-Type": "text/html; charset=utf-8"}});
    } else {
        // 处理图片大小调整请求
        return handleResize(request);
    }
}

// 处理图片大小调整请求
async function handleResize(request) {
    const requestJSON = await request.json(); // 解析请求参数
    if (!requestJSON.url) {
      return new Response('请输入图片URL！'); // 参数错误处理
    }
    const width = parseInt(requestJSON.width);
    if (isNaN(width) || width <= 0) {
      return new Response('请输入合法的宽度！'); // 参数错误处理
    }

    // 设置请求头
    const headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36',
                     'Accept': '*/*'};
    let response = await fetch(requestJSON.url, {cdnProxy: false, headers}); 

    // 检查响应是否为图片
    let type = response.headers.get("Content-Type") || "";
    if (!type.startsWith("image/")) {
        return new Response('响应的不是图片！'); // 错误处理
    }

    // 读取图片数据到内存
    let bytes = new Uint8Array(await response.arrayBuffer());

    // 调用 WASM 模块的 init() 函数分配内存空间
    let ptr = resizer.init(bytes.byteLength);

    // 将图片数据复制到 WebAssembly 内存
    const memoryBytes = new Uint8Array(wasm.env.memory.buffer);
    memoryBytes.set(bytes, ptr);

    // 调用 WASM 模块的 resize() 函数进行图片大小调整
    let newSize = resizer.resize(bytes.byteLength, width);

    if (newSize == 0) {
        return new Response(`调整大小失败!`);
    }

    // 从 WebAssembly 内存中提取调整后的图片数据
    let resultBytes = memoryBytes.slice(ptr, ptr + newSize);

    // 创建新的响应，并将调整后的图片数据返回给客户端
    return new Response(resultBytes.buffer, {headers: {"Content-Type": "image/jpeg"}}); // 返回调整后的图片
}

// HTML 页面内容
const HOMEPAGE = `
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>调整图片大小</title>
    <style>
        // ... 页面样式 ...
    </style>
</head>
<body>
    <div class="container">
        <div class="input-container">
            <label for="imageUrl">原始图片URL（我们的节点不一定能访问）</label>
            <input type="text" id="imageUrl" value="http://ctest.eca.wangsu.com/ECA-test/pet-shop-website-template/img/about.jpg">
        </div>
        <div class="input-container">
            <label for="imageWidth">调整后的宽度（限制了必须小于原图宽度）</label>
            <input type="text" id="imageWidth" value="365">
        </div>
        <button class="button" onclick="adjustImageSize()">调整</button>
        <div class="image-container" id="resultContainer"></div>
    </div>

    <script>
        // ... 页面脚本 ...
    </script>
</body>
</html>
`;
                    
addEventListener("fetch", event => {
    return event.respondWith(handleRequest(event.request));
});

说明

Edge Cloud Apps目前仅支持JavaScript语言环境。但您可以将 C、C++、Rust、Go等语言编写的代码编译成WebAssembly (WASM) 格式，并在 Edge Cloud Apps 函数中运行，从而复用现有代码资产，并获得更高的执行效率。

Media Delivery

Cloud Security

Web Performance

Enterprise Application

Storage

Edge Computing

Console Guide

API Docs

多脚本语言接入（WASM）

详细代码

说明

目录