使用 SDL2 + emscripten 时浏览器不加载本地图像

Browser doesn't load local images while using SDL2 + emscripten

我正在尝试使用 emscripten 将 SDL2 c++ 代码移植到 JS。我当前的文件系统如下所示(文件夹大写,文件小写):

C
|-VC
   |-SDL
       |-test.cpp
       |-RESOURCES
              |-hello.bmp

'hello.bmp' 是任何 640x480 像素位图,而 'test.cpp' 包含下一个源代码:

#include <SDL.h>
#include <iostream>

#ifdef __EMSCRIPTEN__
#include <emscripten.h>
#endif

struct context
{
    SDL_Renderer *ren;
    SDL_Texture *tex;
};

void mainloop(void* arg)
{
    context *con = static_cast<context*>(arg);
    SDL_RenderClear(con->ren);
    SDL_RenderCopy(con->ren, con->tex, NULL, NULL);
    SDL_RenderPresent(con->ren);
}

int main(int, char**)
{
    if (SDL_Init(SDL_INIT_VIDEO) != 0)
    {
        std::cout << "SDL_Init Error: " << SDL_GetError() << std::endl;
        return 1;
    }

    SDL_Window *win = SDL_CreateWindow("Hello World!", 100, 100, 640, 480, SDL_WINDOW_SHOWN);
    if (win == nullptr)
    {
        std::cout << "SDL_CreateWindow Error: " << SDL_GetError() << std::endl;
        SDL_Quit();
        return 1;
    }

    SDL_Renderer *ren = SDL_CreateRenderer(win, -1, SDL_RENDERER_ACCELERATED | SDL_RENDERER_PRESENTVSYNC);
    if (ren == nullptr)
    {
        SDL_DestroyWindow(win);
        std::cout << "SDL_CreateRenderer Error: " << SDL_GetError() << std::endl;
        SDL_Quit();
        return 1;
    }

    std::string imagePath = "Resources/hello.bmp";
    SDL_Surface *sur = SDL_LoadBMP(imagePath.c_str());
    if (sur == nullptr)
    {
        SDL_DestroyRenderer(ren);
        SDL_DestroyWindow(win);
        std::cout << "SDL_LoadBMP Error: " << SDL_GetError() << std::endl;
        SDL_Quit();
        return 1;
    }

    SDL_Texture *tex = SDL_CreateTextureFromSurface(ren, sur);
    SDL_FreeSurface(sur);
    if (tex == nullptr)
    {
        SDL_DestroyRenderer(ren);
        SDL_DestroyWindow(win);
        std::cout << "SDL_CreateTextureFromSurface Error: " << SDL_GetError() << std::endl;
        SDL_Quit();
        return 1;
    }

#ifdef __EMSCRIPTEN__
    context con = { ren, tex };
    emscripten_set_main_loop_arg(mainloop, &con, -1, 1);
#else
    for (int i = 0; i < 5; ++i)
    {
        SDL_RenderClear(ren);
        SDL_RenderCopy(ren, tex, NULL, NULL);
        SDL_RenderPresent(ren);
        SDL_Delay(1000);
    }
#endif

    SDL_DestroyTexture(tex);
    SDL_DestroyRenderer(ren);
    SDL_DestroyWindow(win);
    SDL_Quit();

    return 0;
}

我正在使用 Windows 10 和 emscripten 1.38.21。我正在 dir "C:\emsdk-master\emscripten.38.21":

中的控制台中使用下一个命令行进行反编译
emcc c:/vc/sdl/test.cpp -O2 -s USE_SDL=2 -s USE_SDL_IMAGE=2 -s --preload-file c:/vc/sdl/Resources -o prueba.html

问题是一旦生成 hello.html 我在 Firefox 64.0 浏览器中打开它,显示下一个错误文本:

SDL_LoadBMP Error: Couldn't open Resources/hello.bmp

在 Chrome 71.0 中启动异常并停止程序。

请问,这对 Firefox / Chrome 浏览器有什么帮助吗?

我不确定,但也许这个 args 组合会对您有所帮助。 最好加上 -lSDL ,emcc 会处理链接库的其他问题。

您需要先进入当前目录。

 cd c:/vc/sdl/

这样我们将只使用相对路径。

 emcc test.cpp -s USE_SDL=2 -lSDL --preload-file Resources -s USE_SDL_IMAGE=2 -s ALLOW_MEMORY_GROWTH=1 --use-preload-plugins -s SDL2_IMAGE_FORMATS='["bmp","png"]' -s GL_UNSAFE_OPTS=0  -o prueba.html