Gangmax Blog

WASM-ImageMagick

You can use ImageMagick to display the EXIF info of a image file and remove the EXIF info from the file.

1
2
3
4
5
6
# Check the EXIF info of a given image file.
identify -format '%[EXIF:*]' IMG_6223.JPG
# Convert the file into another one without EXIF.
convert IMG_6223.JPG -strip IMG_6223_updated.JPG
# Check the updated image file without the EXIF info.
identify -format '%[EXIF:*]' IMG_6223_updated.JPG

From here and here.

The following content describes how to do the same thing in a browser with pure Javascript code. This is done by the “WASM-ImageMagick“ project.

First, create the following HTML file:

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <title>EXIF</title>
  <!-- A mimic of "https://knicknic.github.io/imagemagick/rotate/" -->
</head>

<body>
  <BR>
  <p>Source image: </p>
  <img id="srcImage" src="source.jpg">
  <BR>
  <br>
  <p>Strip the EXIF info from the source image and create the updated one: </p>
  <img id="strippedImage">

  <script type='module'>
    //import the library to talk to imagemagick
    import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js';

    // various html elements
    let strippedImage = document.getElementById('strippedImage');

    // Fetch the image to rotate, and call image magick
    let DoMagickCall = async function () {
      let fetchedSourceImage = await fetch("source.jpg");
      let arrayBuffer = await fetchedSourceImage.arrayBuffer();
      let sourceBytes = new Uint8Array(arrayBuffer);

      // calling image magick with one source image, and command to rotate & resize image
      const files = [{ 'name': 'srcFile.jpg', 'content': sourceBytes }];
      const command = ["convert", "srcFile.jpg", "-strip", "out.jpg"];
      let processedFiles = await Magick.Call(files, command);

      // response can be multiple files (example split)
      // here we know we just have one
      let firstOutputImage = processedFiles[0]
      strippedImage.src = URL.createObjectURL(firstOutputImage['blob'])
      console.log("created image " + firstOutputImage['name'])
    };
    DoMagickCall();
  </script>
</body>

</html>

Then copy a “source.jpg” file to the same directory of this HTML file, which has some EXIF information in it.

Run the following command to start a simple HTTP server:

1
python -m http.server

Open a browser and go to “http://localhost:8000/“, save the second image on the page to local file system and check. You can see that the EXIF info is removed. This shows the power of “WASM-ImageMagick” which compiles ImageMagick to pure JavaScript code via WebAssembly.

Comments