Kompilieren eines bestehenden C-Moduls zu WebAssembly

Die Version des Encoders zu erhalten, ist großartig, aber ein tatsächliches Bild zu encodieren, wäre noch beeindruckender. Wie machen wir das?

Die erste Frage, die Sie beantworten müssen, ist: Wie bekomme ich das Bild in Wasm? Bei einem Blick auf die Encoding-API von libwebp werden Sie feststellen, dass es ein Array von Bytes in RGB, RGBA, BGR oder BGRA erwartet. Glücklicherweise hat die Canvas API CanvasRenderingContext2D.getImageData — das Ihnen ein Uint8ClampedArray liefert, das die Bilddaten in RGBA enthält:

async function loadImage(src) {
  // Load image
  const imgBlob = await fetch(src).then((resp) => resp.blob());
  const img = await createImageBitmap(imgBlob);
  // Make canvas same size as image
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  // Draw image onto canvas
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  return ctx.getImageData(0, 0, img.width, img.height);
}

Jetzt ist es "nur noch" eine Frage des Kopierens der Daten von JavaScript nach Wasm. Dazu müssen Sie zwei zusätzliche Funktionen freigeben — eine, die Speicher für das Bild innerhalb von Wasm allokiert und eine, die ihn wieder freigibt:

#include <stdlib.h> // required for malloc definition

EMSCRIPTEN_KEEPALIVE
uint8_t* create_buffer(int width, int height) {
    return malloc(width * height * 4 * sizeof(uint8_t));
}

EMSCRIPTEN_KEEPALIVE
void destroy_buffer(uint8_t* p) {
    free(p);
}

Die Funktion create_buffer() allokiert einen Puffer für das RGBA-Bild — daher 4 Bytes pro Pixel. Der von malloc() zurückgegebene Zeiger ist die Adresse der ersten Speicherzelle dieses Puffers. Wenn der Zeiger in der JavaScript-Welt zurückgegeben wird, wird er einfach als Zahl behandelt. Nachdem die Funktion mit cwrap für JavaScript freigegeben wurde, können Sie diese Zahl verwenden, um den Anfang unseres Puffers zu finden und die Bilddaten zu kopieren:

const api = {
  version: Module.cwrap("version", "number", []),
  create_buffer: Module.cwrap("create_buffer", "number", ["number", "number"]),
  destroy_buffer: Module.cwrap("destroy_buffer", "", ["number"]),
  encode: Module.cwrap("encode", "", ["number", "number", "number", "number"]),
  free_result: Module.cwrap("free_result", "", ["number"]),
  get_result_pointer: Module.cwrap("get_result_pointer", "number", []),
  get_result_size: Module.cwrap("get_result_size", "number", []),
};

const image = await loadImage("./image.jpg");
const p = api.create_buffer(image.width, image.height);
Module.HEAP8.set(image.data, p);
// ... call encoder ...
api.destroy_buffer(p);

Das Bild ist jetzt in Wasm verfügbar. Es ist Zeit, den WebP-Encoder seinen Job machen zu lassen. Ein Blick auf die WebP-Dokumentation zeigt, dass WebPEncodeRGBA perfekt geeignet scheint. Die Funktion nimmt einen Zeiger auf das Eingabebild und seine Abmessungen sowie eine Qualitätsoption zwischen 0 und 100. Sie allokiert auch einen Ausgabe-Puffer für uns, den wir mit WebPFree() freigeben müssen, sobald wir mit dem WebP-Bild fertig sind.

Das Ergebnis der Encoding-Operation ist ein Ausgabe-Puffer und seine Länge. Da Funktionen in C keine Arrays als Rückgabewerte haben können (es sei denn, Sie allokieren Speicher dynamisch), greift dieses Beispiel auf ein statisches globales Array zurück. Das mag kein sauberes C sein. Tatsächlich verlässt es sich darauf, dass Wasm-Zeiger 32 Bit breit sind. Aber dies ist eine faire Abkürzung, um es einfach zu halten:

int result[2];
EMSCRIPTEN_KEEPALIVE
void encode(uint8_t* img_in, int width, int height, float quality) {
    uint8_t* img_out;
    size_t size;

    size = WebPEncodeRGBA(img_in, width, height, width * 4, quality, &img_out);

    result[0] = (int)img_out;
    result[1] = size;
}

EMSCRIPTEN_KEEPALIVE
void free_result(uint8_t* result) {
  WebPFree(result);
}

EMSCRIPTEN_KEEPALIVE
int get_result_pointer() {
  return result[0];
}

EMSCRIPTEN_KEEPALIVE
int get_result_size() {
  return result[1];
}

Jetzt, wo alles bereit ist, können Sie die Encoding-Funktion aufrufen, den Zeiger und die Bildgröße abrufen, sie in einen eigenen JavaScript-Puffer legen und alle während des Prozesses allokierten Wasm-Puffer freigeben:

api.encode(p, image.width, image.height, 100);
const resultPointer = api.get_result_pointer();
const resultSize = api.get_result_size();
const resultView = new Uint8Array(
  Module.HEAP8.buffer,
  resultPointer,
  resultSize,
);
const result = new Uint8Array(resultView);
api.free_result(resultPointer);

Abhängig von der Größe Ihres Bildes könnten Sie auf einen Fehler stoßen, bei dem Wasm den Speicher nicht ausreichend erweitern kann, um sowohl das Eingabe- als auch das Ausgabebild unterzubringen:

Glücklicherweise ist die Lösung für dieses Problem in der Fehlermeldung enthalten. Sie müssen einfach -s ALLOW_MEMORY_GROWTH=1 zu Ihrem Kompilierbefehl hinzufügen.

Und da haben Sie es. Sie haben einen WebP-Encoder kompiliert und ein JPEG-Bild in WebP transkodiert. Um zu beweisen, dass es funktioniert hat, wandeln Sie Ihren Ergebnis-Puffer in einen Blob um und verwenden ihn in einem <img>-Element:

const blob = new Blob([result], { type: "image/webp" });
const blobURL = URL.createObjectURL(blob);
const img = document.createElement("img");
img.src = blobURL;
img.alt = "a useful description";
document.body.appendChild(img);

Betrachten Sie die Herrlichkeit eines neuen WebP-Bildes.

Demo | Originalartikel