Multilingual Support with WASM_Developer Tools_Edge Application-Documentation

This example demonstrates how to compile code written in languages like C, C++, Rust, and Go into WebAssembly (WASM) format and execute it within Edge Cloud Apps Function to achieve image resizing functionality. Users can upload an image through a web interface, specify the desired width, and the function will call a pre-compiled WASM library to process the image and return the resized version.

Code Example

// Instantiate the WebAssembly module with 32MB of memory
const wasm = require('./resizer.wasm', {memory: new WebAssembly.Memory({initial: 1024})});
const resizer = wasm.exports; // Access exported functions from the WASM module

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') {
        // Return the HTML page
        return new Response(HOMEPAGE, {headers: {"Content-Type": "text/html; charset=utf-8"}});
    } else {
        // Handle image resizing requests
        return handleResize(request);
    }
}

// Handle image resizing requests
async function handleResize(request) {
    const requestJSON = await request.json(); // Parse request parameters
    if (!requestJSON.url) {
      return new Response('Please provide an image URL!'); // Error handling for missing parameter
    }
    const width = parseInt(requestJSON.width);
    if (isNaN(width) || width <= 0) {
      return new Response('Please enter a valid width!'); // Error handling for invalid width
    }

    // Set request headers
    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}); 

    // Check if the response is an image
    let type = response.headers.get("Content-Type") || "";
    if (!type.startsWith("image/")) {
        return new Response('The response is not an image!'); // Error handling for non-image response
    }

    // Read image data into memory
    let bytes = new Uint8Array(await response.arrayBuffer());

    // Call the WASM module's init() function to allocate memory space
    let ptr = resizer.init(bytes.byteLength);

    // Copy image data to WebAssembly memory
    const memoryBytes = new Uint8Array(wasm.env.memory.buffer);
    memoryBytes.set(bytes, ptr);

    // Call the WASM module's resize() function to resize the image
    let newSize = resizer.resize(bytes.byteLength, width);

    if (newSize == 0) {
        return new Response(`Image resizing failed!`);
    }

    // Extract the resized image data from WebAssembly memory
    let resultBytes = memoryBytes.slice(ptr, ptr + newSize);

    // Create a new response and return the resized image data to the client
    return new Response(resultBytes.buffer, {headers: {"Content-Type": "image/jpeg"}}); 
}

// HTML Page content
const HOMEPAGE = `
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Image Resizing</title>
    <style>
        // ... Page styles ...
    </style>
</head>
<body>
    <div class="container">
        <div class="input-container">
            <label for="imageUrl">Original Image URL (our node may not be able to access it)</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">Resized Width (must be smaller than the original width)</label>
            <input type="text" id="imageWidth" value="365">
        </div>
        <button class="button" onclick="adjustImageSize()">Resize</button>
        <div class="image-container" id="resultContainer"></div>
    </div>

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

Note

While Edge Cloud Apps currently only support a JavaScript runtime environment, you can compile code written in languages like C, C++, Rust, and Go into WebAssembly (WASM) format and execute it within your Edge Cloud Apps Functions. This enables you to reuse existing code assets and achieve greater execution efficiency.

Media Delivery

Cloud Security

Web Performance

Enterprise Application

Storage

Edge Computing

Console Guide

API Docs

Multilingual Support with WASM

Code Example

Note

Directory