博客

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

  • Post category:other

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

CEF（Chromium Embedded Framework）是一款基于Chromium的嵌入式浏器框架，可以在C++应用程序中嵌入浏览器窗口，并与前端JavaScript进行交互。本文将为您提供CEF C++调用前端js方法展示传递过来的图片数据的完整攻略，包括环境搭建、代码实现等方面的内容。

环境搭建

在使用CEF C++调用前端js方法展示传递过来的图片数据之前，需要先搭建好相应的环境。以下是环境搭建的步骤：

  1. 下载并安装CEF框架。
  2. 配置CEF框的相关参数，包括CEF库路径、资源路径等。
  3. 创建一个C++应用程序，并将CEF框架嵌入到应用程序中。

代码实现

在搭建好环境之后，可以开始实现CEF C++调用前端js方法展示传递过来的图片数据。以下是代码实现的步骤：

  1. 在前端JavaScript中定义一个用于展示图片的方法，例如“showImage”方法。
  2. 在C++应用程序中加载前端页面，并注册一个JavaScript扩展，用于调用前端JavaScript方法。
  3. 在C++应用程序中获取图片数据，并将其转换为base64编码的字符串。
  4. 在C++应用程序中调用前端JavaScript方法，并将base64编码的图片数据作为参数传递给该方法。

示例1

以下是一个使用CEF C++调用前端js方法展示传递过来的图片数据的示例：

  1. 在前端JavaScript中定义一个名为“showImage”的方法，用于展示图片。
  2. 在C++应用程序中加载前端页面，并注册一个名为“myExtension”的JavaScript扩展。
  3. 在C++应用程序中获取图片数据，并将其转换为base64编码的字符串。
  4. 在C++应用程序中调用前端JavaScript方法“showImage”，并将base64编码的图片数据作为参数传递给该方法。
#include "include/cef_app.h"
#include "include/cef_browser.h"
#include "include/cef_command_line.h"
#include "include/cef_frame.h"
#include "include/cef_runnable.h"
#include "include/cef_v8.h"
#include "include/wrapper/cef_helpers.h"

class MyExtensionHandler : public CefV8Handler {
public:
  MyExtensionHandler() {}

  bool Execute(const CefString& name,
               CefRefPtr<CefV8Value> object,
               const CefV8ValueList& arguments,
               CefRefPtr<CefV8Value>& retval,
               CefString& exception) OVERRIDE {
    if (name == "showImage" && arguments.size() == 1 &&
        arguments[0]->IsString()) {
      CefString image_data = arguments[0]->GetStringValue();
      // 在这里将base64编码的图片数据转换为图片并展示
      return true;
    }
    return false;
  }

  IMPLEMENT_REFCOUNTING(MyExtensionHandler);
};

class MyV8Handler : public CefV8Handler {
public:
  MyV8Handler() {}

  bool Execute(const CefString& name,
               CefRefPtr<CefV8Value> object,
               const CefV8ValueList& arguments,
               CefRefPtr<CefV8Value>& retval,
               CefString& exception) OVERRIDE {
    if (name == "myExtension" && arguments.size() == 0) {
      CefRefPtr<CefV8Value> handler =
          CefV8Value::CreateObject(new MyExtensionHandler());
      retval = handler;
      return true;
    }
    return false;
  }

  IMPLEMENT_REFCOUNTING(MyV8Handler);
};

class MyClient : public CefClient, public CefLoadHandler {
public:
  MyClient() {}

  CefRefPtr<CefLoadHandler> GetLoadHandler() OVERRIDE { return this; }

  void OnLoadEnd(CefRefPtr<CefBrowser> browser,
                 CefRefPtr<CefFrame> frame,
                 int httpStatusCode) OVERRIDE {
    if (frame->IsMain()) {
      CefRefPtr<CefV8Context> context = frame->GetV8Context();
      CefRefPtr<CefV8Value> global = context->GetGlobal();
      CefRefPtr<CefV8Value> my_extension =
          CefV8Value::CreateObject(new MyVHandler());
      global->SetValue("myExtension", my_extension, V8_PROPERTY_ATTRIBUTE_NONE);
    }
  }

  IMPLEMENT_REFCOUNTING(MyClient);
};

int main(int argc, char* argv[]) {
  CefMainArgs main_args(argc, argv);
  CefRefPtr<MyClient> client(new MyClient());
  CefSettings settings;
  CefInitialize(main_args, settings, client.get(), NULL);
  CefRefPtr<CefBrowser> browser =
      CefBrowserHost::CreateBrowserSync(CefWindowInfo(), client.get(),
                                        "http://example.com", CefBrowserSettings(), NULL);
  CefRunMessageLoop();
  CefShutdown();
  return 0;
}

示例2

以下是另一个使用CEF C++调用前端js方法展示传递过来的图片数据的示例：

  1. 在前端JavaScript中定义一个名为“showImage”的方法，用于展示图片。
  2. 在C++应用程序中加载前端页面，并注册一个名为“myExtension”的JavaScript扩展。
  3. 在C++应用程序中获取图片数据，并将其转换为base64编码的字符串。
  4. 在C++应用程序中调用前端JavaScript方法“showImage”，并将base64编码的图片数据作为参数传递给该方法。
#include "include/cef_app.h"
#include "include/cef_browser.h"
#include "include/cef_command_line.h"
#include "include/cef_frame.h"
#include "include/cef_runnable.h"
#include "include/cef_v8.h"
#include "include/wrapper/cef_helpers.h"

class MyExtensionHandler : public CefV8Handler {
public:
  MyExtensionHandler() {}

  bool Execute(const CefString& name,
               CefRefPtr<CefV8Value> object,
               const CefV8ValueList& arguments,
               CefRefPtr<CefV8Value>& retval,
               CefString& exception) OVERRIDE {
    if (name == "showImage" && arguments.size() == 1 &&
        arguments[0]->IsString()) {
      CefString image_data = arguments[0]->GetStringValue();
      // 在这里将base64编码的图片数据转换为图片并展示
      return true;
    }
    return false;
  }

  IMPLEMENT_REFCOUNTING(MyExtensionHandler);
};

class MyV8Handler : public CefV8Handler {
public:
  MyV8Handler() {}

  bool Execute(const CefString& name,
               CefRefPtr<CefV8Value> object,
               const CefV8ValueList& arguments,
               CefRefPtr<CefV8Value>& retval,
               CefString& exception) OVERRIDE {
    if (name == "myExtension" && arguments.size() == 0) {
      CefRefPtr<CefV8Value> handler =
          CefV8Value::CreateObject(new MyExtensionHandler());
      retval = handler;
      return true;
    }
    return false;
  }

  IMPLEMENT_REFCOUNTING(MyV8Handler);
};

class MyClient : public CefClient, public CefLoadHandler {
public:
  MyClient() {}

  CefRefPtr<CefLoadHandler> GetLoadHandler() OVERRIDE { return this; }

  void OnLoadEnd(CefRefPtr<CefBrowser> browser,
                 CefRefPtr<CefFrame> frame,
                 int httpStatusCode) OVERRIDE {
    if (frame->IsMain()) {
      CefRefPtr<CefV8Context> context = frame->GetV8Context();
      CefRefPtr<CefV8Value> global = context->GetGlobal();
      CefRefPtr<CefV8Value> my_extension =
          CefV8Value::CreateObject(new MyV8Handler());
      global->SetValue("myExtension", my_extension, V8_PROPERTY_ATTRIBUTE_NONE);
    }
  }

  IMPLEMENT_REFCOUNTING(MyClient);
};

int main(int argc, char* argv[]) {
  CefMainArgs main_args(argc, argv);
  CefRefPtr<MyClient> client(new MyClient());
  CefSettings;
  CefInitialize(main_args, settings, client.get(), NULL);
  CefRefPtr<CefBrowser> browser =
      CefBrowserHost::CreateBrowserSync(CefWindowInfo(), client.get(),
                                        "http://example.com", CefBrowserSettings(), NULL);
  CefRunMessageLoop();
  CefShutdown();
  return 0;
}

结论

本文为您提供了CEF C++调用前端js方法展示传递过来的图片数据的完整攻略，包括环境搭建、代码实现等方面的内容。如果您需要在C++应用程序中嵌入浏览器窗口，并与前端JavaScript进行交互，可以按照本文的方法使用CEF框架同时，本文还提供了两个使用CEF C++调用前端js方法展示传递过来的图片数据的示例，帮助您更地理解CEF框架的实际应用。

Tags: