大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来的主题是 ImageMagick 支持了WebAssembly，可以直接在浏览器中调用。大家有类似述求的可以尝试下，话不多说，直接进入正题！

什么是 ImageMagick

ImageMagick 是一个免费的开源软件套件，用于编辑和操作数字图像，可用于创建、编辑、合成或转换位图图像，支持多种文件格式，包括： JPEG、PNG、GIF、TIFF 和 PDF。

ImageMagick 广泛应用于网页开发、图形设计和视频编辑等行业，以及科学研究、医学成像和天文学。 其多功能性和可定制性，以及强大的图像处理能力，使其成为各种图像相关任务的流行选择。

ImageMagick 的使用场景包括用于执行复杂图像处理任务的命令行界面，以及用于将其功能集成到软件应用程序中的 API。 它是用 C 语言编写的，可以在多种操作系统上使用，包括 Linux、Windows 和 macOS。

ImageMagick 的典型功能包括：动画制作、色彩管理、命令行处理、复杂的文字布局、图像组合、图像修饰、描绘图像特征、支持离散傅立叶变换、分布式像素缓存、图像识别、降噪降色、虚拟像素支持等等。

ImageMagick 支持 WebAssembly什么是 WASM-ImageMagick

WASM-ImageMagick 只是将 ImageMagick 代码重新编译为 WebAssembly，从而将 ImageMagick 的强大功能带入浏览器。

支持 PNG、TIFF、JPEG、BMP、GIF、PhotoShop、GIMP 等图片格式。

项目集成 WASM-ImageMagick

首先需要安装相应的库：

npm install --save wasm-imagemagick

如果不在 npm 开发环境中工作，可以加载库包 .js 文件。 它支持作为 JavaScript 标准模块或 UMD 模块导入。

接着在项目中直接导入：

  <script type='module'>    //import the library to talk to imagemagick    import * as Magick from ';;    // ...    // Fetch the image to rotate, and call image magick    let DoMagickCall = async function () {      // ....      // calling image magick with one source image, and command to rotate & resize image      let processedFiles = await Magick.Call([{ 'name': 'srcFile.png', 'content': sourceBytes }], ["convert", "srcFile.png", "-rotate", "90", "-resize", "200%", "out.png"]);      // ...    };    DoMagickCall();  </script>

wasm-imagemagick 附带了一些易于使用的 API，用于从 url 创建图像文件、重用输出图像和更好的命令语法执行多个命令，以及处理文件、html 图像、输入元素、图像比较、元数据提取等的实用程序。

import { buildInputFile, execute, loadImageElement } from "wasm-imagemagick";const { outputFiles, exitCode } = await execute({  inputFiles: [    await buildInputFile(";, "image1.png"),  ],  commands: [    "convert image1.png -rotate 70 image2.gif",    // heads up: the next command uses 'image2.gif' which was the output of previous command:    "convert image2.gif -scale 23% image3.jpg",  ],});if (exitCode !== 0)  await loadImageElement(    outputFiles[0],    document.getElementById("outputImage")  );

下面示例执行识别命令来提取有关图像的信息， 正如：从执行结果中访问 stdout，并使用 exitCode 和 stderr 检查错误：

import { buildInputFile, execute } from "wasm-imagemagick";const { stdout, stderr, exitCode } = await execute({  inputFiles: [await buildInputFile("foo.gif")],  commands: `identify foo.gif`,});if (exitCode === 0)  console.log("foo.gif identify output: " + stdout.join("\n"));else console.error("foo.gif identify command failed: " + stderr.join("\n"));

以下示例不使用库提供的任何帮助程序，仅使用底层 call() 函数，该函数接受一个命令，仅采用数组语法：

import { call } from "wasm-imagemagick";// build an input file by fetching its contentconst fetchedSourceImage = await fetch("assets/rotate.png");const content = new Uint8Array(await fetchedSourceImage.arrayBuffer());const image = { name: "srcFile.png", content };const command = [  "convert",  "srcFile.png",  "-rotate",  "90",  "-resize",  "200%",  "out.png",];const result = await call([image], command);// is there any errors ?if (result.exitCode !== 0)  return alert("There was an error: " + result.stderr.join("\n"));// response can be multiple files (example split) here we know we just have oneconst outputImage = result.processedFiles[0];// render the output image into an existing <img> elementconst outputImage = document.getElementById("outputImage");outputImage.src = URL.createObjectURL(outputImage.blob);outputImage.alt = outputImage.name;

本文主要和大家探讨 ImageMagick 支持 WebAssembly，支持直接在浏览器中调用。相信通过本文的阅读，大家对 ImageMagick 会有一个初步的了解，同时也会有自己的看法。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料