环境：centos 7.9

1、准备环境

sudo yum install docker

sudo systemctl start docker.service

sudo docker pull trzeci/emscripten:latest

2、编写C++源文件

//main.cpp

#include<stdio.h>

#include<string>

#include<cstring>

#ifdef __EMSCRIPTEN__

#include<emscripten.h>

#endif

int main()

{

  return 0;

}

extern "C"{

#ifdef __EMSCRIPTEN__

  EMSCRIPTEN_KEEPALIVE

#endif

  int add(int x,int y)

  {

    return x + y;

  }

#ifdef __EMSCRIPTEN__

  EMSCRIPTEN_KEEPALIVE

#endif

  int min(int x,int y)

  {

    return x -y;

  }

#ifdef __EMSCRIPTEN__

  EMSCRIPTEN_KEEPALIVE

#endif

  char* get(char* a)

  {

    return a;

  }

#ifdef __EMSCRIPTEN__

  EMSCRIPTEN_KEEPALIVE

#endif

  char* data(char* a)

  {

    *a = '\0';

    char name[] = "hello from native code.";

    strcat(a,name);

    return a;

  }

#ifdef __EMSCRIPTEN__

  EMSCRIPTEN_KEEPALIVE

#endif

  int get_data(char* name,int lenth,char* onoutput)

  {

    char str[260]={0};

    sprintf(str,"name:%s,lenth:%d,from native code.",name,lenth);

    strcpy(onoutput,str);

    return strlen(str);

  }

}

3、启动docker，并将main.cc文件拷贝至docker中进行编译。

sudo docker run -ti 7634ecdacf21 /bin/bash

编译指令：

emcc main.cpp -o main.js -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap','UTF8ToString']

编译后，产生如下main.js 和main.wasm文件。

4、测试

将main.js、main.wasm(两个文件存放目录一致)拷贝到web容器中，并编写main.html测试页面。

<html>

  <head>

    <meta charset="utf-8">

    <title>WebAssemble Demo</title>

  </head>

  <body>

    <button onclick="fun_add()">add</button>

    <button onclick="fun_min()">min</button>

    <button onclick="fun_get()">get</button>

    <button onclick="fun_data()">data</button>

    <button onclick="fun_get_data()">get_data</button>

    <div id="log"></div>

    <script>

      function fun_add()

      {

        const add=Module.cwrap('add','number',['number,number']);

        log.innerHTML=("add(12,5)的计算结果:" + add(12, 5));

      }

      function fun_min()

      {

        const min=Module.cwrap('min','number',['number','number']);

        log.innerHTML=("min(12,5)的计算结果:" + min(12, 5));

      }

      function fun_get()

      {

        const get = Module.cwrap('get','string',['string']);

        log.innerHTML=get('汉语-hanyu-demo!');

      }

      function fun_data()

      {

        const data = Module.cwrap('data','string',['string']);

        log.innerHTML=data('');

      }

      function fun_get_data()

      {

        let onoutput="";

        const pointer = Module._malloc(256);

        const get_data = Module.ccall('get_data','number',['string','number','number'],['hello from web',129,pointer]);

        onoutput = Module.UTF8ToString(pointer);

        log.innerHTML=onoutput;

        Module._free(pointer)

      }

    </script>

    <script src="democpp.js"></script>

  </body>

</html>

在浏览器中输入main.html页面请求地址，分别点击[add]、[min]、[ge]三个按钮进行测试，实验效果如下图所示：

WebAssembly编译的更多相关文章

  1. 对于WebAssembly编译出来的.wasm文件js如何调用

    WebAssembly也叫浏览器字节码技术 这里就不过多的解释了网上很多介绍 主要是让大家知道在js里面如何调用执行它,我之前看WebAssemblyAPI时候反正是看得一脸懵逼 也是为了大家能更快的 ...

  2. 初探WebAssembly

    1.前言 参加完2018年上海的QCon大会,想到了会议中来自Microsoft的朱力旻大佬讲的WebAssembly,感触颇深. 我之前完全没有了解过WebAssembly,之前没有了解的原因也很简 ...

  3. WebAssembly 介绍

    http://blog.csdn.net/zhangzq86/article/details/61195685 WebAssembly 的出现是不是意味着 Javascript 要完? https:/ ...

  4. WebAssembly，Web的新时代

    在浏览器之争中,Chrome凭借JavaScript的卓越性能取得了市场主导地位,然而由于javascript的无类型特性,导致其运行时消耗大量的性能做为代价,这也是JavaScript的瓶颈之一.W ...

  5. 纵论WebAssembly,JS在性能逆境下召唤强援

    webassembly的作用 webassembly是一种底层的二进制数据格式和一套可以操作这种数据的JS接口的统称.我们可以认为webassembly的范畴里包含两部分 wasm: 一种体积小.加载 ...

  6. 在Windows10搭建WebAssembly开发环境

    最近研究WebAssembly技术,准备用WebAssembly编译C/C++代码供前端调用.网上看了很多文章,收获很大,现在就遇到的问题做一个记录. 官网关于windows开发环境搭建基本上几句话, ...

  7. shell 中长命令的换行处理

    考察下面的脚本: emcc -o ./dist/test.html --shell-file ./tmp.html --source-map-base dist -O3 -g4 --source-ma ...

  8. Linux 一条长命令占用多行

    前言 考察下面的脚本: ? 1 emcc -o ./dist/test.html --shell-file ./tmp.html --source-map-base dist -O3 -g4 --so ...

  9. Blazor带我重玩前端(一)

    写在前面 曾经我和前端朋友聊天的时候,我说我希望有一天可以用C#写前端,不过当时更多的是美好的想象,而现在这一切正变得真实…… 什么是Blazor 我们知道浏览器可以正确解释并执行JavaScript ...

随机推荐

  1. 【剑指Offer】矩阵覆盖 解题报告（Python）

    [剑指Offer]矩阵覆盖 解题报告(Python) 标签(空格分隔): LeetCode 题目地址:https://www.nowcoder.com/ta/coding-interviews 题目描 ...

  2. 【LeetCode】876. Middle of the Linked List 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 使用哑结点 不使用哑结点 日期 题目地址:https ...

  3. 使用Java对接永中格式转换

    永中格式转换服务基于永中DCS的文档转换能力,支持不同格式文件之间的高质量互转,可实现PDF文档与Word.Excel.PPT.图片的高质量互转,PDF文档转换完美保留原文档的版式,格式等,转换效果出 ...

  4. Docker 与 K8S学习笔记（五）—— 容器的操作（上篇）

    上一篇我们介绍了Dockerfile的基本编写方法,这一节我们来看看Docker容器的常用操作. 一.容器的运行方式 容器有两种运行方式,即daemon形式运行与非daemon形式运行,通俗地讲就是长 ...

  5. toString()、String.valueOf、(String)强转

    1.基本类型 (1)基本类型没有toString()方法 (2)推荐使用String.valueOf(); (3)无法强转 =========补========= (String)是标准的类型转换,将 ...

  6. Roslyn+T4+EnvDTE项目完全自动化(3) ——生成c++代码

    C++语法复杂,写一个示例通过T4可生成c++代码 需求:数据库,生成c++增,删,改,查代码 数据生成c++类,包含所有字段 自动识别数据的主键Key 查询生成赋值类字段,类型转换 通过类自动生成s ...

  7. dart系列之:dart代码最佳实践

    目录 简介 命名规则 import中的顺序 格式化 总结 简介 每种语言都有自己的代码风格,这种代码风格是跟语言特性息息相关的.如果在编码的过程中遵循这种统一的编码规则,会给我们的业务带来非常多的便利 ...

  8. Oracle中的基本数据类型

    一.Oracle 基本数据类型 1.字符数据类型 CHAR:存储固定长度的字符串,如果没有指定长度,默认为1个字节,如果数据长度没有达到指定的长度,则通过填充空格的方式来使其达到定义的长度(CHAR类 ...

  9. DB2给表批量赋权

    使用DB2的for循环语句给表批量赋权,同理,稍加修改可作为其他批量操作. 值得注意的是: grant语句无法直接执行,需要使用execute immediate才能执行. 授权操作表的所有权限:gr ...

  10. Selenium_获取浏览器名称和版本（5）

    from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get(" ...