WebAssembly实战-在浏览器中使用ImageMagick

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk

# Fetch the latest version of the emsdk (not needed the first time you clone)
git pull

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
# On Windows, run emsdk instead of ./emsdk, and emsdk_env.bat instead of source ./emsdk_env.sh.
source ./emsdk_env.sh

docker pull mk33mk33/wasm-base

./configure  # 检查系统环境，判断当前环境是否满足编译条件

make # 执行编译

make install  # 将二进制应用程序安装的指定位置

# tree -L 2
.
├── docker # 存放docker文件
│   ├── emscripten
│   └── wasm-base
├── external
│   ├── build-item.sh # 构建脚本
│   ├── build.sh # 构建脚本入口
│   ├── dist  # 生成的js和wasm
│   ├── ImageMagick # 依赖库
│   ├── libjpeg # 依赖库
│   ├── libpng # 依赖库
│   ├── libwebp # 依赖库
│   ├── README.md
│   └── zlib # 依赖库
├── README.md
├── todo.md
└── web  # 验证页面
    ├── img
    ├── index.html
    ├── README.md
    ├── wasm # 存放wasm模块和胶水js
    ├── webp-wasm.html #webp 测试
    └── worker.js

# build.sh
docker run --rm --workdir /wasm -v $(pwd):/wasm mk33mk33/wasm-base  bash ./build-item.sh

export CFLAGS="-O3 -s BINARYEN_TRAP_MODE=clamp -s ALLOW_MEMORY_GROWTH=1 -s USE_PTHREADS=0"
export CXXFLAGS="-O3 -s BINARYEN_TRAP_MODE=clamp -s ALLOW_MEMORY_GROWTH=1 -s USE_PTHREADS=0"

# zlib/CMakeLists.txt
...
add_library(zlibstatic STATIC ${ZLIB_SRCS} ${ZLIB_ASMS} ${ZLIB_PUBLIC_HDRS} ${ZLIB_PRIVATE_HDRS})
...

cd /wasm/zlib  # 在docker环境下进入映射的源码目录
emconfigure cmake .  # 使用 emconfigure 调用 cmake 生成 makefile
emmake make   # 使用 emmake 调用 make 生成 libz.a

# libpng/CMakeLists.txt
...

option(PNG_BUILD_ZLIB "Custom zlib Location, else find_package is used" OFF)

if(NOT PNG_BUILD_ZLIB)
  find_package(ZLIB REQUIRED)
  include_directories(${ZLIB_INCLUDE_DIR})
endif()

if(UNIX AND NOT APPLE AND NOT BEOS AND NOT HAIKU)
  find_library(M_LIBRARY m)
else()
  # libm is not needed and/or not available
  set(M_LIBRARY "")
  
endif()
# COMMAND LINE OPTIONS
option(PNG_SHARED "Build shared lib" ON)
option(PNG_STATIC "Build static lib" ON)
option(PNG_TESTS  "Build libpng tests" ON)

...

cd /wasm/libpng
emconfigure cmake . -DPNG_SHARED=OFF -DPNG_TESTS=OFF -DZLIB_INCLUDE_DIR=/wasm/zlib -DZLIB_LIBRARY=/wasm/zlib -DM_LIBRARY=/usr/lib/x86_64-linux-gnu  # -D<key>=<value>是在命令行上给cmake添加变量的格式
emmake make

# libjpeg/CMakeLists.txt
...
OPTION(BUILD_STATIC OFF)
OPTION(BUILD_EXECUTABLES ON)
OPTION(BUILD_TESTS ON)
...

cd /wasm/libjpeg
emconfigure cmake . -DBUILD_STATIC=ON 
emmake make

# libwebp/CMakeLists.txt
cmake_minimum_required(VERSION 3.5)

project(WebP C)

# Options for coder / decoder executables.
option(WEBP_BUILD_LIBWEBPMUX "Build the libwebpmux." ON)  # 增加此行选项，用于开启对libwebpmux的编译
option(WEBP_ENABLE_SIMD "Enable any SIMD optimization." ON)
option(WEBP_BUILD_ANIM_UTILS "Build animation utilities." ON)
...

if(WEBP_BUILD_GIF2WEBP OR WEBP_BUILD_IMG2WEBP OR WEBP_BUILD_LIBWEBPMUX) # 修改此行，增加 OR WEBP_BUILD_LIBWEBPMUX 此if为true就会编译libwebpmux
  parse_makefile_am(${CMAKE_CURRENT_SOURCE_DIR}/src/mux "WEBP_MUX_SRCS" "")
  add_library(libwebpmux ${WEBP_MUX_SRCS})
  target_link_libraries(libwebpmux webp)
...

cd /wasm/libwebp 
emconfigure cmake . -DWEBP_BUILD_WEBP_JS=ON -DZLIB_INCLUDE_DIR=/wasm/zlib -DZLIB_LIBRARY=/wasm/zlib -DPNG_LIBRARY=/wasm/libpng -DPNG_PNG_INCLUDE_DIR=/wasm/libpng -DJPEG_LIBRARY=/wasm/libjpeg -DJPEG_INCLUDE_DIR=/wasm/libjpeg
emmake make

#ImageMagick/configure.ac
...

# ==============================================================================
# ImageMagick Configuration
# ==============================================================================
AC_MSG_NOTICE([
==============================================================================
${PACKAGE_NAME} ${PACKAGE_VERSION}${PACKAGE_VERSION_ADDENDUM} is configured as follows. Please verify that this
configuration matches your expectations.

Host system type: $host
Build system type: $build

               Option                        Value
------------------------------------------------------------------------------
Shared libraries  --enable-shared=$enable_shared		$libtool_build_shared_libs
Static libraries  --enable-static=$enable_static		$libtool_build_static_libs
Build utilities   --with-utilities=$with_utilities		$with_utilities
Module support    --with-modules=$build_modules		$build_modules
GNU ld            --with-gnu-ld=$with_gnu_ld		$lt_cv_prog_gnu_ld
Quantum depth     --with-quantum-depth=$with_quantum_depth	$with_quantum_depth
High Dynamic Range Imagery
                  --enable-hdri=$enable_hdri		$enable_hdri

Install documentation:				$wantdocs

Memory allocation library:
  JEMalloc          --with-jemalloc=$with_jemalloc		$have_jemalloc
  TCMalloc          --with-tcmalloc=$with_tcmalloc		$have_tcmalloc
  UMem              --with-umem=$with_umem		$have_umem

Delegate library configuration:
  BZLIB             --with-bzlib=$with_bzlib		$have_bzlib
  Autotrace         --with-autotrace=$with_autotrace		$have_autotrace
  DJVU              --with-djvu=$with_djvu		$have_djvu
  DPS               --with-dps=$with_dps		$have_dps
  FFTW              --with-fftw=$with_fftw		$have_fftw
  FLIF              --with-flif=$with_flif		$have_flif
  FlashPIX          --with-fpx=$with_fpx		$have_fpx
  FontConfig        --with-fontconfig=$with_fontconfig	$have_fontconfig
  FreeType          --with-freetype=$with_freetype		$have_freetype
  Ghostscript lib   --with-gslib=$with_gslib		$have_gslib
  Graphviz          --with-gvc=$with_gvc		$have_gvc
  HEIC              --with-heic=$with_heic             $have_heic
  JBIG              --with-jbig=$with_jbig		$have_jbig
  JPEG v1           --with-jpeg=$with_jpeg		$have_jpeg
  JPEG XL           --with-jxl=$with_jxl    $have_jxl
  LCMS              --with-lcms=$with_lcms		$have_lcms
  LQR               --with-lqr=$with_lqr		$have_lqr
  LTDL              --with-ltdl=$with_ltdl		$have_ltdl
  LZMA              --with-lzma=$with_lzma		$have_lzma
  Magick++          --with-magick-plus-plus=$with_magick_plus_plus	$have_magick_plus_plus
  OpenEXR           --with-openexr=$with_openexr		$have_openexr
  OpenJP2           --with-openjp2=$with_openjp2		$have_openjp2
  PANGO             --with-pango=$with_pango		$have_pango
  PERL              --with-perl=$with_perl		$have_perl
  PNG               --with-png=$with_png		$have_png
  RAQM              --with-raqm=$with_raqm		$have_raqm
  RAW               --with-raw=$with_raw 	   	$have_raw
  RSVG              --with-rsvg=$with_rsvg		$have_rsvg
  TIFF              --with-tiff=$with_tiff		$have_tiff
  WEBP              --with-webp=$with_webp		$have_webp
  WMF               --with-wmf=$with_wmf		$have_wmf
  X11               --with-x=$with_x			$have_x
  XML               --with-xml=$with_xml		$have_xml
  ZLIB              --with-zlib=$with_zlib		$have_zlib
  ZSTD              --with-zstd=$with_zstd		$have_zstd

Delegate program configuration:
  GhostPCL          None			$PCLDelegate ($PCLVersion)
  GhostXPS          None			$XPSDelegate ($XPSVersion)
  Ghostscript       None			$PSDelegate ($GSVersion)

Font configuration:
  Apple fonts       --with-apple-font-dir=$with_apple_font_dir	$result_apple_font_dir
  Dejavu fonts      --with-dejavu-font-dir=$with_dejavu_font_dir	$result_dejavu_font_dir
  Ghostscript fonts --with-gs-font-dir=$with_gs_font_dir		$result_ghostscript_font_dir
  URW-base35 fonts  --with-urw-base35-font-dir=$with_urw_base35_font_dir	$result_urw_base35_font_dir
  Windows fonts     --with-windows-font-dir=$with_windows_font_dir	$result_windows_font_dir

X11 configuration:
  X_CFLAGS        = $X_CFLAGS
  X_PRE_LIBS      = $X_PRE_LIBS
  X_LIBS          = $X_LIBS
  X_EXTRA_LIBS    = $X_EXTRA_LIBS

Options used to compile and link:
  PREFIX          = $PREFIX_DIR
  EXEC-PREFIX     = $EXEC_PREFIX_DIR
  VERSION         = $PACKAGE_VERSION
  CC              = $CC
  CFLAGS          = $CFLAGS
  CPPFLAGS        = $CPPFLAGS
  PCFLAGS         = $PCFLAGS
  DEFS            = $DEFS
  LDFLAGS         = $LDFLAGS
  LIBS            = $MAGICK_DEP_LIBS
  CXX             = $CXX
  CXXFLAGS        = $CXXFLAGS
  FEATURES        = $MAGICK_FEATURES
  DELEGATES       = $MAGICK_DELEGATES
==============================================================================
])

...

export CPPFLAGS="-I/wasm/libpng -I/wasm/zlib -I/wasm/libjpeg -I/wasm/libwebp/src"
export LDFLAGS="-L/wasm/zlib -L/wasm/libpng -L/wasm/libpng/.libs -L/wasm/libjpeg -L/wasm/libwebp"

#ImageMagick/configure.ac
...

#
# Check for ZLIB
#
AC_ARG_WITH([zlib],
    [AC_HELP_STRING([--without-zlib],
                    [disable ZLIB support])],
    [with_zlib=$withval],
    [with_zlib='yes'])

if test "$with_zlib" != 'yes'; then
    DISTCHECK_CONFIG_FLAGS="${DISTCHECK_CONFIG_FLAGS} --with-zlib=$with_zlib "
fi

have_zlib='no'
ZLIB_CFLAGS=""
ZLIB_LIBS=""
ZLIB_PKG=""
if test "x$with_zlib" = "xyes"; then
  AC_MSG_RESULT([-------------------------------------------------------------])
  PKG_CHECK_MODULES(ZLIB,[zlib >= 1.0.0], have_zlib=yes, have_zlib=no)
  AC_MSG_RESULT([])
fi

if test "$have_zlib" = 'yes'; then
  AC_DEFINE(ZLIB_DELEGATE,1,Define if you have ZLIB library)
  CFLAGS="$ZLIB_CFLAGS $CFLAGS"
  LIBS="$ZLIB_LIBS $LIBS"
fi

AM_CONDITIONAL(ZLIB_DELEGATE, test "$have_zlib" = 'yes')
AC_SUBST(ZLIB_CFLAGS)
AC_SUBST(ZLIB_LIBS)

...

cd /wasm/ImageMagick  #进入源码目录

autoreconf -fi # 重新用configure.ac生成configure文件

# 指定PKG_CONFIG_PATH、禁用未编译的组件、不生成动态库
emconfigure ./configure --prefix=/ --disable-shared  --without-threads --without-magick-plus-plus --without-perl --without-x --disable-largefile --disable-openmp --without-bzlib --without-dps --without-freetype --without-jbig --without-openjp2 --without-lcms --without-wmf --without-xml --without-fftw --without-flif --without-fpx --without-djvu --without-fontconfig --without-raqm --without-gslib --without-gvc --without-heic --without-lqr --without-openexr --without-pango --without-raw --without-rsvg --without-xml PKG_CONFIG_PATH="/wasm/libpng:/wasm/zlib:/wasm/libjpeg:/wasm/libwebp/src:/wasm/libwebp/src/mux:/wasm/libwebp/src/demux:" 
emmake make

# 输出运行时方法，ccall和cwrap，输出模块里的全局方法int_sqrt
./emcc tests/hello_function.cpp -o function.js -s EXPORTED_FUNCTIONS='["_int_sqrt"]' -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

# --tag 标明源码为C语言，--mode 表示此次动作为链接 
# libMagickCore-7.Q16HDRI.la 为 ImageMagick 底层库
# libMagickWand-7.Q16HDRI.la 为 ImageMagick 上层库
# magick.o 为含有main方法和命令行调用逻辑的入口对象
# 在dist目录下生成wasm模块和js胶水文件，命名为wasm-im.js和wasm-im.wasm
# 导出main方法

/bin/bash ./libtool --tag=CC --mode=link emcc $CFLAGS $LDFLAGS -o /wasm/dist/wasm-im.js -s EXTRA_EXPORTED_RUNTIME_METHODS='["callMain"]' utilities/magick.o MagickCore/libMagickCore-7.Q16HDRI.la MagickWand/libMagickWand-7.Q16HDRI.la

Module.onRuntimeInitialized = function () {
    // 调用main方法
    Module.callMain(command)
}

FS.mkdir('/im');// mkdir im
FS.currentPath = '/im'; // cd im
FS.open('/im');// 打开文件夹
FS.readFile('animation.gif') // 读取文件内容

# 背景颜色:SkyBlue 间隔100ms 分别在位置5,10展示balloon.gif 35,30展示medical.gif 62,50展示present.gif 10,55展示shading.gif
# 无限次循环 在当前目录下生成文件为 animation.gif
convert -delay 100  -size 100x100 xc:SkyBlue \
          -page +5+10  balloon.gif   -page +35+30 medical.gif  \
          -page +62+50 present.gif   -page +10+55 shading.gif  \
          -loop 0  animation.gif

function callMain(args) {
    args = args || [];
    var argc = args.length + 1;
    var argv = stackAlloc((argc + 1) * 4);
    HEAP32[argv >> 2] = allocateUTF8OnStack(thisProgram);
    for (var i = 1; i < argc; i++) {
        HEAP32[(argv >> 2) + i] = allocateUTF8OnStack(args[i - 1])
    }
    HEAP32[(argv >> 2) + argc] = 0;
    try {
        var ret = Module["_main"](argc, argv);
        exit(ret, true)
    } catch (e) {
        if (e instanceof ExitStatus) {
            return
        } else if (e == "SimulateInfiniteLoop") {
            noExitRuntime = true;
            return
        } else {
            var toLog = e;
            if (e && typeof e === "object" && e.stack) {
                toLog = [e, e.stack]
            }
            err("exception thrown: " + toLog);
            quit_(1, e)
        }
    } finally {
        calledMain = true
    }
}

// 把图片换成jpg
var command = ['convert','-delay', '100', '-size', '100x100' ,'xc:SkyBlue', 
          '-page','+5+10','1.jpg','-page','+35+30','2.jpg',
          '-page','+62+50','3.jpg','-page','+10+55','4.jpg',
          '-loop','0','animation.gif']

// 用fetch获取四张图片
FS.writeFile('1.jpg', new Uint8Array(await(await fetch("1.jpg")).arrayBuffer()))
FS.writeFile('2.jpg', new Uint8Array(await(await fetch("2.jpg")).arrayBuffer()))
FS.writeFile('3.jpg', new Uint8Array(await(await fetch("3.jpg")).arrayBuffer()))
FS.writeFile('4.jpg', new Uint8Array(await(await fetch("4.jpg")).arrayBuffer()))

var gif = FS.readFile('animation.gif')
var gifBlob = new Blob([gif]);
var img = document.createElement('img');
img.src = URL.createObjectURL(gifBlob);
document.body.appendChild(img)

Available ports:
    Boost headers v1.70.0 (USE_BOOST_HEADERS=1; Boost license)
    icu (USE_ICU=1; Unicode License)
    zlib (USE_ZLIB=1; zlib license)
    bzip2 (USE_BZIP2=1; BSD license)
    libjpeg (USE_LIBJPEG=1; BSD license)
    libpng (USE_LIBPNG=1; zlib license)
    SDL2 (USE_SDL=2; zlib license)
    SDL2_image (USE_SDL_IMAGE=2; zlib license)
    SDL2_gfx (zlib license)
    ogg (USE_OGG=1; zlib license)
    vorbis (USE_VORBIS=1; zlib license)
    SDL2_mixer (USE_SDL_MIXER=2; zlib license)
    bullet (USE_BULLET=1; zlib license)
    freetype (USE_FREETYPE=1; freetype license)
    harfbuzz (USE_HARFBUZZ=1; MIT license)
    SDL2_ttf (USE_SDL_TTF=2; zlib license)
    SDL2_net (zlib license)
    cocos2d
    regal (USE_REGAL=1; Regal license)