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