CEF C++调用前端js方法展示传递过来的图片数据

当我们需要在一个桌面应用程序中展示动态的图片数据时，通常情况下我们可以使用网络图片，但是如果需要展示本地的图片呢？这时候，我们可以使用 CEF (Chromium Embedded Framework) 以及前端的 JavaScript 技术来实现这一需求。

CEF 简介

CEF 是一个基于 Chromium 内核的开源框架，它可以方便地在桌面应用程序中集成 Chrome 浏览器的渲染引擎和 JavaScript 引擎。CEF 提供了 C API、C++ API、Java API 等多种编程接口，可以快速地实现一个完整的 Web 应用程序。CEF 支持 Windows、Linux、Mac 等多个操作系统，并且提供了多进程架构，保证了程序的稳定性和安全性。

前端 JavaScript 函数定义

在前端 JavaScript 中，我们需要定义一个函数来接收 CEF 传递过来的图片数据。这个函数的定义如下：

function showImage(base64str) {
  var img = new Image();
  img.src = base64str;
  document.body.appendChild(img);
}

在这个函数中，我们使用 new Image() 创建 img 元素，并将传递过来的 base64str 赋值给 img.src 属性，然后将 img 元素添加到 body 中，从而实现在网页上展示图片。

CEF C++ 调用前端 JavaScript

在 CEF C++ 中，我们可以使用 ExecuteJavaScript 函数来执行前端的 JavaScript。我们需要将 JavaScript 代码字符串作为参数传递给 ExecuteJavaScript 函数，代码如下：

std::string javascript = "showImage('" + base64str + "')";
browser_->GetMainFrame()->ExecuteJavaScript(javascript, "", 0);

在这个代码中，base64str 表示图片的 Base64 数据。我们将这个数据拼接到 JavaScript 函数调用字符串中，然后传递给 ExecuteJavaScript 函数。该函数将 JavaScript 代码注入到当前网页中，并在网页上展示出传递过来的图片数据，从而完成了在 CEF C++ 中调用前端 JavaScript 方法的操作。

使用范例

下面是一个完整的示例程序，该程序从本地读取图片文件，以 Base64 格式传递给前端 JavaScript，然后在网页上展示图片：

#include <fstream>
#include <iostream>
#include <string>
#include "include/cef_app.h"
#include "include/cef_browser.h"
#include "include/cef_command_line.h"
#include "include/cef_render_process_handler.h"
#include "include/wrapper/cef_helpers.h"

class DemoRenderProcessHandler : public CefRenderProcessHandler {
 public:
  void OnContextCreated(CefRefPtr<CefBrowser> browser,
                        CefRefPtr<CefFrame> frame,
                        CefRefPtr<CefV8Context> context) override {
    CEF_REQUIRE_UI_THREAD();
    // 获取图片文件内容转化为 Base64 格式
    std::string base64str = ImageToBase64("image.jpg");
    // 调用前端 JavaScript 方法传递图片数据
    std::string javascript = "showImage('" + base64str + "')";
    browser->GetMainFrame()->ExecuteJavaScript(javascript, "", 0);
  }

 private:
  std::string ImageToBase64(const std::string& filename) {
    std::ifstream in(filename, std::ios::in | std::ios::binary);
    if (!in) {
      return "";
    }
    std::string base64str;
    while (in) {
      uint8_t buffer[3] = {0};
      in.read(reinterpret_cast<char*>(buffer), sizeof(buffer));
      base64str.append(base64_encode(buffer, sizeof(buffer)));
    }
    in.close();
    return "data:image/jpeg;base64," + base64str;
  }

  std::string base64_encode(const uint8_t* data, size_t len) {
    static const char table[] = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
                                "abcdefghijklmnopqrstuvwxyz"
                                "0123456789+/";
    std::string result;
    result.reserve((len + 2) / 3 * 4);
    for (size_t i = 0; i < len; i += 3) {
      uint32_t buffer = (data[i] << 16) | (i + 1 < len ? data[i + 1] << 8 : 0) |
                        (i + 2 < len ? data[i + 2] : 0);
      result.push_back(table[buffer >> 18]);
      result.push_back(table[(buffer >> 12) & 0x3F]);
      result.push_back(i + 1 < len ? table[(buffer >> 6) & 0x3F] : '=');
      result.push_back(i + 2 < len ? table[buffer & 0x3F] : '=');
    }
    return result;
  }

  IMPLEMENT_REFCOUNTING(DemoRenderProcessHandler);
};

class DemoApp : public CefApp, public CefBrowserProcessHandler {
 public:
  DemoApp() {}

  CefRefPtr<CefRenderProcessHandler> GetRenderProcessHandler() override {
    return new DemoRenderProcessHandler();
  }

  void OnContextInitialized() override {
    CEF_REQUIRE_UI_THREAD();
    CefRefPtr<CefCommandLine> commandLine =
        CefCommandLine::GetGlobalCommandLine();
    CefRefPtr<CefBrowser> browser =
        CefBrowserHost::CreateBrowserSync(CefWindowInfo(), nullptr,
                                          "http://localhost:8080", {}, nullptr,
                                          nullptr);
  }

  IMPLEMENT_REFCOUNTING(DemoApp);
};

int main(int argc, char* argv[]) {
  CefMainArgs main_args(argc, argv);
  CefRefPtr<DemoApp> app(new DemoApp());
  return CefExecuteProcess(main_args, app, nullptr);
}

在该程序中，我们定义了 DemoApp 类和 DemoRenderProcessHandler 类。DemoApp 类是应用程序的入口，继承自 CefApp 类，负责创建和管理浏览器进程；DemoRenderProcessHandler 类继承自 CefRenderProcessHandler 类，负责处理网页渲染进程中的事件。

程序从本地读取图片文件，将图片数据转化为 Base64 格式，并传递给前端 JavaScript，从而完成了在网页上展示图片的操作。

总结

本文介绍了如何使用 CEF C++ 调用前端 JavaScript 方法展示传递过来的图片数据。通过本文的学习，读者可以掌握 CEF C++ 的基础知识，并理解使用 CEF 调用前端技术的方法，为开发更加强大的桌面应用程序提供了有力的支持。