wasm获取鼠标坐标的颜色

创建包含了一个Canvas的页面，当鼠标在Canvas上移动时将调用C函数，输出光标在Canvas中的坐标及该坐标处的像素的颜色（RGBA）值。

---

创建canvas_mouse.cc：

#ifndef EM_PORT_API
#if defined(__EMSCRIPTEN__)
#include 
#if defined(__cplusplus)
#define EM_PORT_API(rettype) extern "C" rettype EMSCRIPTEN_KEEPALIVE
#else
#define EM_PORT_API(rettype) rettype EMSCRIPTEN_KEEPALIVE
#endif
#else
#if defined(__cplusplus)
#define EM_PORT_API(rettype) extern "C" rettype
#else
#define EM_PORT_API(rettype) rettype
#endif
#endif
#endif
#include 
uint8_t *img_buf = NULL;
int img_width = 0, img_height = 0;

EM_PORT_API(uint8_t *)
get_img_buf(int w, int h)
{
    if (img_buf == NULL || w != img_width || h != img_height)
    {
        if (img_buf)
        {
            free(img_buf);
        }
        img_buf = (uint8_t *)malloc(w * h * 4);
        img_width = w;
        img_height = h;
    }

    return img_buf;
}

EM_PORT_API(void)
on_mouse_move(int x, int y)
{
    if (img_buf == NULL)
    {
        printf("img_buf not ready!\n");
        return;
    }
    if (x >= img_width || x < 0 || y >= img_height || y < 0)
    {
        printf("out of range!\n");
        return;
    }

    printf("mouse_x:%d; mouse_y:%d; RGBA:(%d, %d, %d, %d)\n", x, y,
           img_buf[(y * img_width + x) * 4],
           img_buf[(y * img_width + x) * 4 + 1],
           img_buf[(y * img_width + x) * 4 + 2],
           img_buf[(y * img_width + x) * 4 + 3]);
}

img_buf指向用于保存位图数据的缓冲区，get_img_buf()函数将根据传入的参数判断是否需要重新创建缓冲区。on_mouse_move()函数根据传入参数进行颜色拾取和日志输出。

创建canvas_mouse.html：

 在Module的onRuntimeInitialized()回调时，创建了一个Image对象，加载cover.png图片，图片加载完成后，被更新至Canvas，同时位图数据被复制到C环境中。canvas.addEventListener()为鼠标移动添加了事件响应函数，当鼠标移动时，nMouseMove()函数将被执行。onMouseMove()函数将光标从窗口坐标转为Canvas坐标后，调用C导出函数Module._on_mouse_move()执行颜色拾取操作。

 编译canvas_mouse.cc：

emcc code/1213/canvas_mouse.cpp -o code/1213/canvas_mouse.js

在浏览器运行html文件：